Question

我目前正在查看React的功能组件和useState挂钩。

const [stateA, setStateA] = useState(somevalue)
const [stateB, setStateB] = useState(somevalue)

function onClick(value){
setStateA(stateA => transformedValue) //a is now transformedValue
//Use transformedValue to update state B 
setStateB(...)
}

我的问题是在那之后如何使用新近更新的stateA（transformedValue）来updateB。到目前为止，我只能访问状态A的先前值，而不能访问transformdValue。我知道我可以在setStateA函数外部计算transformedValue，然后将其用于setStateB。但这是正确的方法吗？我知道也可以将stateA和stateB合并为一个州。正确的方法是什么？还有另一种更可取的方式吗？

Answer 1

由于setState方法是异步的。

您的stateA不会在调用setState时立即更新。

实现此想法的一种方式是

通过使用 useEffect 方法来“观察” stateA，以确保更新stateA。

代码看起来像这样：

   useEffect(()=>{
       setStateB(stateA); // or do anything with updated stateA
    },[stateA]);

Answer 2

最好的方法是使用useEffect。

useEffect(() => {
  setCounter2(count + 1);
}, [count]);

因为您迷恋过一次渲染，请尝试以下操作：

function App() {
  const [count, setCount] = useState(0);
  const [dummy, setDummy] = useState(0);

  useEffect(() => {
    console.log(`Renderderd ${count} times`);
  });

  function handleClick() {
    setCount(prevCounter => {
      setDummy(prevCounter + 1);
      return prevCounter + 1;
    });
  }

  return (
    <>
      <div>You clicked count {count} times!</div>
      <div>Dummy= {dummy} !</div>
      <button onClick={handleClick}>Click me for rendering!</button>
    </>
  );
}

useState挂钩：根据另一个刚刚更新的状态来更新状态

2 个答案: