更新变量并立即使用它 React

Question

我正在尝试在 api 调用后更新变量，但我将使用点击事件来解决这个问题。

如您所见，我打印的变量在第一次单击时使用旧状态，因为它尚未注册更改。在以下调用中，变量将打印新文本。

有没有办法在changeText函数中立即使用更新后的变量？

https://stackblitz.com/edit/react-36jqi3

export default function App() {
  const [text, setText] = useState('inital text');

  const changeText = () => {
    setText('new text');
    console.log(text);
  };

  return (
    <div>
      <button onClick={changeText}>Update variable</button>
    </div>
  );
}

Answer 1

不。

当前正在运行的函数changeText将关闭text创建该changeText函数的渲染期间分配的值。

组件的下一次渲染将生成一个新changeText函数并将其分配给onClick.

如果您想使用刚刚传递给的值，setState请在其他地方保留该值的副本。

const changeText = () => {
  const newValue = 'new text';
  setText(newValue);
  console.log(newValue);
};

或者，在效果挂钩中执行需要新值的工作，该效果挂钩会在该值更改时触发。

useEffect(() => {
    console.log(text);
}, [text]);

const changeText = () => {
  setText('new text');
};

不过，这也会触发初始渲染上的挂钩，因此您可能需要添加额外的测试以确保在记录之前它不是初始值。