React.useState(<initialState>) 如何使用 <initialState> 更新？

Question

function Count() {
  const [count, setCount] = React.useState(0)
  const [count2] = React.useState(count)

  return (
    <div>
      <button onClick={() => setCount((prev) => prev + 1)}>+</button>
      <p>count: {count}</p> // does update
      <p>count 2: {count2}</p>. // does not update
    </div>
  )
}

为什么点击 <button> 后 count 更新时 count2 不更新？

我认为只有惰性初始化状态（例如 React.useState(() => count)）不会在组件重新渲染时更新。

Answer 1

创建 setCount2 以使用依赖于 count 的 useEffect 更新 count2。

function Count() {
  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(count);

  useEffect(() => {
    setCount2(count);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount((prev) => prev + 1)}>+</button>
      <p>count: {count}</p> 
      <p>count 2: {count2}</p>
    </div>
  );
}

Answer 2

我对你的问题有一个混乱的解决方案，混乱的是它可以改进，但截至目前我想不出比这更好的解决方案。

  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(count);

  const changeStateForCount = () => {
    setCount(count + 1);
    setCount2(count + 1);
  };

  return (
    <div>
      <button onClick={changeStateForCount}>+</button>
      <p>count: {count}</p> {/* does update */}
      <p>count 2: {count2}</p>. {/* does not update */}
    </div>
  );
}

React.useState(<initialState>) 如何使用 <initialState> 更新？

How does React.useState(<initialState>) update with <initialState> updates?

reactjs

react-hooks

use-state