循环遍历复杂的react状态以删除所有空字符串

import React, { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState({
    name: 'John',
    age: 25,
    address: {
      street: '123 Main St',
      city: '',
      country: 'USA'
    },
    hobbies: ['reading', '', 'swimming']
  });

  const removeEmptyStrings = (obj) => {
    if (typeof obj === 'string' && obj.trim() === '') {
      return null;
    } else if (Array.isArray(obj)) {
      return obj.filter(item => item !== '').map(removeEmptyStrings);
    } else if (typeof obj === 'object') {
      return Object.entries(obj).reduce((acc, [key, value]) => {
        if (value !== '') {
          acc[key] = removeEmptyStrings(value);
        }
        return acc;
      }, {});
    }
    return obj;
  };

  const handleRemoveEmptyStrings = () => {
    const updatedData = removeEmptyStrings(data);
    setData(updatedData);
  };

  return (
    <div>
      <button onClick={handleRemoveEmptyStrings}>Remove Empty Strings</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;