为什么对象变量不会在 useEffect 中更新？答案

【问题标题】：Why object variable doesnt get updated inside useEffect?为什么对象变量不会在 useEffect 中更新？
【发布时间】：2021-08-30 16:41:12
【问题描述】：

我有这段反应代码：

import React, {useEffect} from "react";
import "./styles.css";

export default function App() {

let x ={ x1: []};

useEffect(() => {
  x.x1.push("hi")
})

console.log(x)
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

我想知道为什么控制台总是将对象 x 中的键 x1 的值打印为空数组。我在这里错过了什么？

【问题讨论】：

标签： reactjs use-effect

【解决方案1】：

你的组件只渲染一次（没有状态或道具改变）

即使您的状态像您强制一样重新渲染，let x ={ x1: []}; 也将始终为每次新渲染重新初始化。

如果您想查看您的 x 变量已更新，请尝试改用 useRef，并让您的组件重新渲染以在 useEffect 中看到它：

function App() {
  const [state, setState] = React.useState();
  const x = React.useRef({ x1: [] });

  React.useEffect(() => {
    x.current.x1.push("hi");
    setState(1);
  }, []);

  console.log(x.current);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

好的，知道了。但是，可以将 UseState 用于相同目的，而不是使用 UseRef 吗？但我想这会导致状态覆盖而不是状态合并，对吧？
是的，你也可以使用State来实现同样的事情，对于一个状态你会做一些不同的事情：setState([...state, "hi"])
useRef() 基本上就是 useState({current: initialValue })[0];
是的，明白了。谢谢瑞恩！
很乐意提供帮助 ;)