Reactjs 通过单击具有此值的按钮将值添加到数组对象键

首先，稍微更改一下Fields的数据 struct 可能会更好.目前的 struct 增加了复杂性，但没有真正的好处.具体地说，每个对象有一个current键，但在任何给定时间，似乎只允许您拥有一个当前条目.

然而，从理论上讲，数据 struct 可能会以一种糟糕的状态结束，其中多个条目是当前的.通常，最好避免这种情况，并使用更简洁的数据 struct ，该 struct 只包含绝对最少的信息量来实现目标.这将降低复杂性，更具可读性，并减少错误的表面积.当然，旧的 struct 是完全可能的，但我们不妨边走边清理.

在本例中，您需要的最小规范数据位是值，"Current"条目的值也是index pointer.为此，我们可以使用两个状态项(请注意，存储内容的总体准确性更简洁).这将一些"不可能"状态从"可能"状态中移除.

const [currentIndex, setCurrentIndex] = useState(0);
const [Fields, setFields] = useState([
 { value: [] }, 
 { value: [] }
]);

const handleButtonClick = (e) => {
  setFields((prev) =>
    Object.assign([], prev, {
      [currentIndex]: {
        value: [...prev[currentIndex].value, e.target.dataset.value],
      },
    }),
  );
};

<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) => {
    return (
      <div key={i}>
        <div
          onClick={() => setCurrentIndex(i)}
        >
          {field.value.join('')}
        </div>
      </div>
)})}

另外，请注意，在Reaction中，更常见的做法是只使用JS作用域传递"按钮值"之类的内容，而不是传递data-个属性.除非您有一个很好的理由来expose 这一点(可能会使用它来针对他们进行测试).它应该是这样的:

const [currentIndex, setCurrentIndex] = useState(0);
const [Fields, setFields] = useState([
 { value: [] }, 
 { value: [] }
]);

const appendToCurrent = (buttonValue) => {
  setFields((prev) =>
    Object.assign([], prev, {
      [currentIndex]: {
        value: [...prev[currentIndex].value, buttonValue],
      },
    }),
  );
};

<button onClick={() => appendToCurrent('A')}>A</button>
<button onClick={() => appendToCurrent('B')}>B</button>
<button onClick={() => appendToCurrent('C')}>C</button>

{Fields.map((field, i) => {
    return (
      <div key={i}>
        <div
          onClick={() => setCurrentIndex(i)}
        >
          {field.value.join('')}
        </div>
      </div>
)})}