从使用状态更改变量其他变量正在功能组件中重置答案

【问题标题】：Change variable from usestate other variable is getting reset in functional component从使用状态更改变量其他变量正在功能组件中重置
【发布时间】：2021-07-03 16:30:02
【问题描述】：

当我更新我的状态变量时，我的状态变量发生了变化，但我的所有其他变量正在恢复到它们的初始值。我正在添加我的测试组件。

如果我删除 setTest 所以我的 combileFileData 在按下添加按钮后会按预期提供值，但是当我使用 setTest 时，每次它都会给我['b]

  const [pass, setPass] = React.useState([]);
  let combineFileData = ["b"];

  function showHandler() {
    console.log("combine file data", combineFileData);
  }

  function addHandler() {
    setPass(["a", "s"]);

    combineFileData.push("a");
  }
  return (
    <div>
      <button onClick={showHandler}>Show</button>
      <button onClick={addHandler}>Add</button>
    </div>
  );
}

【问题讨论】：

更改状态会导致组件重新渲染。每次渲染组件时都会调用let combineFileData = ["b"];。所以每次设置状态，combineFileData 就变成了b

标签： reactjs react-hooks setstate

【解决方案1】：

您的combineFileData 在每次渲染时都会“重新初始化”。因此，它的行为就像它始终具有其初始值一样。

为了使您的实现尽可能保持相同，您可以像这样使用 ref：

const combineFileData = useRef([“b”]);

function addHandler() {
    setPass(["a", "s"]);

    combineFileData.current.push("a");
}

【讨论】：