React使用useState点击切换标题与按钮文本出现重复异常如何解决

arr数组被定义在组件函数内部，每次组件触发重渲染时，这个数组都会被重新初始化为["Marco", "Polo"]，完全不会保留上一次点击交换后的结果。
对照控制台输出就能对应上异常逻辑：

• 第一次点击：初始数组交换为['Polo', 'Marco']，更新state触发重渲染，arr被重置回初始值
• 第二次点击：刚被重置的数组又被交换为['Polo', 'Marco']，和第一次点击的更新结果完全一致，页面显示重复
• 后续点击会重复上述重置-交换的流程，自然无法保持正常交替逻辑

另外原代码中setInputBUtton存在拼写错误（Button首字母未大写），虽然不影响运行，但不符合常规命名规范。

二选一即可：

方案1：直接交换state值（最简洁） #

不需要额外定义中间数组，每次点击直接互换两个state的值：

import React, { useState } from "react";
import "../styles/App.css";
const App = () => {
  const [input, setInput] = useState("Marco");
  const [inputButton, setInputButton] = useState("Polo");
  const changethis = () => {
    setInput(inputButton);
    setInputButton(input);
  };

  return (
    <div id="main">
      <h1 id="marco-polo">{input}</h1>
      <button id="marco-polo-toggler" onClick={changethis}>
        {inputButton}
      </button>
    </div>
  );
};

export default App;

方案2：将数组纳入state管理 #

如果要保留数组的实现逻辑，就把数组放到state中管理，避免重渲染时被重置：

import React, { useState } from "react";
import "../styles/App.css";
const App = () => {
  const [arr, setArr] = useState(["Marco", "Polo"]);
  const changethis = () => {
    setArr([arr[1], arr[0]]);
  };

  return (
    <div id="main">
      <h1 id="marco-polo">{arr[0]}</h1>
      <button id="marco-polo-toggler" onClick={changethis}>
        {arr[1]}
      </button>
    </div>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者Sangamesh Mathad