掌握 React useState 中嵌套数组状态的不可变更新技巧

import React, { useState } from 'react';

function MyComponent() {
  const [sampleData, setSampleData] = useState({
    value1: '初始值A',
    value2: '初始值B',
    value3: ['元素1', '元素2']
  });

  // 更新非数组属性（例如 value1）
  const updateValue1 = () => {
    setSampleData({ ...sampleData, value1: '新的值A' });
  };

  // ...
}

setSampleData({ ...sampleData, value1: '新的值A' });

// 这种方式会替换整个 value3 数组，而不是在其基础上添加
setSampleData({ ...sampleData, value3: ['新的数组元素'] });

import React, { useState } from 'react';

function MyComponent() {
  const [sampleData, setSampleData] = useState({
    value1: '初始值A',
    value2: '初始值B',
    value3: ['元素1', '元素2']
  });

  // 更新 value1
  const updateValue1 = () => {
    setSampleData({ ...sampleData, value1: '新的值A' });
    console.log("更新 value1 后的状态:", { ...sampleData, value1: '新的值A' });
  };

  // 向 value3 数组中添加一个新元素
  const addElementToValue3 = () => {
    setSampleData(prevData => ({
      ...prevData, // 复制所有其他属性 (value1, value2)
      value3: [...prevData.value3, '新添加的元素'] // 创建新数组，包含旧 value3 元素和新元素
    }));
    // 注意：这里的 console.log 可能不会立即显示最新状态，因为状态更新是异步的。
    // 为了演示，我们可以在 useEffect 中监听 sampleData 的变化。
    console.log("尝试添加元素后的状态（可能不是最新）：", sampleData);
  };

  // 向 value3 数组中添加多个新元素
  const addMultipleElementsToValue3 = () => {
    setSampleData(prevData => ({
      ...prevData,
      value3: [...prevData.value3, '元素X', '元素Y']
    }));
  };

  // 更新 value3 数组中某个特定索引的元素（例如，将 '元素1' 改为 '更新的元素1'）
  const updateElementInValue3 = (index, newValue) => {
    setSampleData(prevData => ({
      ...prevData,
      value3: prevData.value3.map((item, i) =>
        i === index ? newValue : item
      )
    }));
  };

  // 从 value3 数组中删除一个元素（例如，删除 '元素2'）
  const removeElementFromValue3 = (elementToRemove) => {
    setSampleData(prevData => ({
      ...prevData,
      value3: prevData.value3.filter(item => item !== elementToRemove)
    }));
  };

  return (
    <div>
      <h1>状态管理示例</h1>
      <p>Value1: {sampleData.value1}</p>
      <p>Value2: {sampleData.value2}</p>
      <p>Value3: {sampleData.value3.join(', ')}</p>

      <button onClick={updateValue1}>更新 Value1</button>
      <button onClick={addElementToValue3}>向 Value3 添加新元素</button>
      <button onClick={addMultipleElementsToValue3}>向 Value3 添加多个元素</button>
      <button onClick={() => updateElementInValue3(0, '更新的元素1')}>更新 Value3 第一个元素</button>
      <button onClick={() => removeElementFromValue3('元素2')}>删除 Value3 中的 '元素2'</button>
    </div>
  );
}

export default MyComponent;