点击按钮为数组对象的value键添加对应值的React实现问题

完整实现代码 #

import { useState } from 'react';

function App() {
  const [Fields, setFields] = useState([
    { value: [], current: true }, 
    { value: [], current: false }
  ]);

  const handleButtonClick = (e) => {
    const buttonValue = e.target.dataset.value;
    setFields(oldArr => {
      // 定位当前激活的字段（current为true的项）
      const activeFieldIndex = oldArr.findIndex(item => item.current);
      // 遍历数组更新状态，保持不可变性
      return oldArr.map((item, index) => {
        if (index === activeFieldIndex) {
          return {
            ...item,
            value: [...item.value, buttonValue]
          };
        }
        return item;
      });
    });
  };

  return (
    <div>
      <button onClick={handleButtonClick} data-value="A">A</button>
      <button onClick={handleButtonClick} data-value="B">B</button>
      <button onClick={handleButtonClick} data-value="C">C</button>

      {Fields.map((field, i) => (
        <div key={i}>
          <div
            onClick={() => {
              setFields(oldArr => 
                oldArr.map((item, index) => ({
                  ...item,
                  current: index === i
                }))
              );
            }}
          >
            {/* 将value数组转为连续字符串展示 */}
            {field.value.join('')}
          </div>
        </div>
      ))}
    </div>
  );
}

export default App;

关键逻辑说明 #

• 复用点击处理函数：所有按钮绑定同一个handleButtonClick，通过dataset.value获取按钮对应的值，减少重复代码。
• 函数式更新状态：使用setFields(oldArr => ...)方式更新状态，确保拿到最新的状态快照，避免异步更新导致的旧值问题。
• 不可变性更新：修改字段的value数组时，通过展开运算符创建新数组和对象，不直接修改原状态，符合React的状态更新原则。
• 展示优化：用field.value.join('')将数组元素拼接成连续字符串，实现你需要的AB/BA展示效果。

内容的提问来源于stack exchange，提问作者s.kuznetsov