javascript - 调用一个变量的 setState 也会更新另一个状态变量

Question

这是一个显示此行为的示例组件：

const App = () => {
  const [testArray] = useState([{key: "hi", value: "Hello "}, {key: "world", value: "world"}]);
  const [otherState, setOtherState] = useState("Change");

  function renderTestArray() {
    return testArray.map(entry => <span key={entry.key}>{entry.value}</span>);
  }

  function updateTestArray() {
    testArray[0].value = testArray[0].value === "Goodbye " ? "Hello " : "Goodbye ";
    setOtherState((prevState) => prevState === "Change" ? "Test" : "Change");
  }

  return (
    <Fragment>
      <div>
        {renderTestArray()}
      </div>
      <button onClick={updateTestArray}>{otherState}</button>
    </Fragment>
  );
};

当我按下更改按钮时，我希望按钮标签会更改，但不会更改“Hello World”消息，因为没有调用该数组的 setState。我不明白的是 React 如何发现 testArray 发生了变化，然后呈现了这种变化。此外，即使未调用其 setState，testArray 更改如何在后续渲染中保持不变。

标签： javascriptreactjs