reactjs - 在 React 中同时更新 React

Question

是否可以在 React 和同一个渲染中更新一个状态，我们可以使用更新后的值来更新另一个状态吗？

import "./styles.css";
import {useState} from 'react';

export default function App() {
  const [num, setNum] = useState(0)
  const [txt, setTxt] = useState(0)

  handleClick= () =>{
    setNum(num+1)
    setTxt(num+1)
  }

  return (
    <div className="App">
     <input type="submit" value="button" onClick={handleClick} />
     <h1>{num}</h1>
     <h1>{txt}</h1>
    </div>
  );
}

在上面的示例中，num 和 txt 最初都设置为 0。第一次单击按钮会将 num 和 txt 都增加到 1，再次单击时会更新为 2，依此类推。

有没有办法在调用时立即将 num 更新为 1 setNum(num+1)，以便它可以将其从 0 更新为 1，因此在调用setTxt(num+1)时，它可以直接将其更新为 2？

标签： reactjsreact-hookssetstate

Answer 1

是的，你可以使用作为依赖的useEffect钩子来做到这一点。num

这是一个 CodeSandbox：

import { useEffect, useState } from "react";

import "./styles.css";

export default function App() {
  const [num, setNum] = useState(0);
  const [txt, setTxt] = useState(0);

  const handleClick = () => {
    setNum(num + 1);
  };

  useEffect(() => {
    if (num > 0) {
      setTxt(num + 1);
    }
  }, [num]);

  return (
    <div className="App">
      <input type="submit" value="button" onClick={handleClick} />
      <h1>{num}</h1>
      <h1>{txt}</h1>
    </div>
  );
}

如果实际状态只是一个数字而不是像数组/对象这样复杂的东西，那么你可以简单地这样做：

const handleClick = () => {
    setNum(num + 1);
    setTxt(num + 2);
  };