我在 React 中用 setSate() 改变了状态值，但它并没有立即改变答案

【问题标题】：I changed the state value with setSate( ) in React, but it does not change immediately我在 React 中用 setSate() 改变了状态值，但它并没有立即改变
【发布时间】：2022-01-12 13:26:17
【问题描述】：

我写了一个函数，当点击按钮时改变项目的状态值。当我尝试使用函数中更改的项目值更改 changeItem 值时，它没有被应用。当我在函数内外查看console.log时，函数内部的item值并没有立即改变，而是确认了之前的值。

//before pressing the button

function App() {
  const [item, setItem] = useState({
    name: "",
    color: "",
    size: 10
  })
  const [changeItem, setchangeItem] = useState(item);

  const onClickChangeItem = () => {
    setItem((prev) => ({
      ...prev,
      name: "haha",
      color: "blue",
      size: 30
    }));
    console.log(item);
    setchangeItem(item);
    console.log(changeItem);
  }
  console.log(item); // {name: '', color: '', size: 10}
  console.log(changeItem); // {name: '', color: '', size: 10}
  
  return (
    <div>
      <button onClick={onClickChangeItem}>change</button>
    </div>
  );
}

export default App;

//after pressing the button

function App() {
  const [item, setItem] = useState({
    name: "",
    color: "",
    size: 10
  })
  const [changeItem, setchangeItem] = useState(item);

  const onClickChangeItem = () => {
    setItem((prev) => ({
      ...prev,
      name: "haha",
      color: "blue",
      size: 30
    }));
    console.log(item); // {name: '', color: '', size: 10}
    setchangeItem(item); 
    console.log(changeItem);// {name: '', color: '', size: 10}
  }
  console.log(item); // {name: 'haha', color: 'blue', size: 30}
  console.log(changeItem); //{name: '', color: '', size: 10}
  
  return (
    <div>
      <button onClick={onClickChangeItem}>change</button>
    </div>
  );
}

export default App;

我想在按下按钮时立即将项目的更改值应用到changeItem，但之前的值会一遍又一遍地应用。如何直接在函数内部应用更改的值？

【问题讨论】：

标签： reactjs state setstate

【解决方案1】：

有两种解决方案可以解决您的问题

1- 使用 setState 回调在 setItem 之后设置 changeItem

//after pressing the button

function App() {
  const [item, setItem] = useState({
    name: "",
    color: "",
    size: 10
  })
  const [changeItem, setchangeItem] = useState(item);

  const onClickChangeItem = () => {
    setItem((prev) => ({
      ...prev,
      name: "haha",
      color: "blue",
      size: 30
    }), it => setchangeItem(it));

  }
  console.log(item); // {name: 'haha', color: 'blue', size: 30}
  console.log(changeItem); //{name: '', color: '', size: 10}
  
  return (
    <div>
      <button onClick={onClickChangeItem}>change</button>
    </div>
  );
}

export default App;

2- 添加一个 useEffect 将在每次更改项目时执行你的代码看起来像这样

function App() {
  const [item, setItem] = useState({
    name: "",
    color: "",
    size: 10
  })
  const [changeItem, setchangeItem] = useState(item);

useEffect(() => {
 setchangeItem(item)
}, [item])

  const onClickChangeItem = () => {
    setItem((prev) => ({
      ...prev,
      name: "haha",
      color: "blue",
      size: 30
    }));
    console.log(item); // {name: '', color: '', size: 10}
    console.log(changeItem);// {name: '', color: '', size: 10}
  }
  console.log(item); // {name: 'haha', color: 'blue', size: 30}
  console.log(changeItem); //{name: '', color: '', size: 10}
  
  return (
    <div>
      <button onClick={onClickChangeItem}>change</button>
    </div>
  );
}

export default App;

【讨论】：

感谢您的回复。发现解决方案 1 仅适用于类组件。已确认在应用解决方案 2 时 changeItem 值没有改变。有没有其他方法可以直接在 onClickChangeItem 函数中应用更改的值？
@JuhuiKim 两种解决方案都应该可以正常工作，我在 codeSandbox 上进行了测试。我建议使用解决方案 2 React 团队实现了 useEffect 钩子来解决这个问题为什么你不想使用它？
我想知道是否可以直接在按钮单击功能中应用更改后的状态值。感谢您的回复。
@JuhuiKim 唯一的方法是使用我在解决方案 1 中提到的回调，否则我们需要 useEffect，我建议使用 useEffect。
感谢您的回答。这真的很有帮助。

【解决方案2】：

完成此操作的最简单方法是摆脱changeItem 状态。当您设置item 的状态时，它正在发生变化。您可以使用它。

如果你想保持你的代码保持原来的样子，那么你需要一个 useEffect。这样，您可以在每次item 更改时更新changeItem：

import { useEffect } from 'react'

useEffect(() => {
setChangeItem(item);
}, [item])

【讨论】：