React 组件更新晚了

Question

我正在使用 React.useEffect()，结果更新较晚。为什么会这样？

function Process(props) {
  const [results, setResults] = React.useState({
    number: "",
    f: {}
  });

  let data = props.data; //returns object from another component which changes

  React.useEffect(() => {
    return () => setResults(data)
  }, [data]);

  return (
    <p>{results.number}</p> //ouputs previous number
  );
};

如果您需要将 props={data} 传递给 Process() 的组件，请告诉我。

谢谢

Answer 1

如果 props.data 已经是一个 useState 就没有必要使用另一个 useEffect 和 useState，React 已经处理了，你可以只使用值

function Process(props) {
   let data = props.data;

  return <p> { data.number } </p>
}

Answer 2

useEffect 函数的 return 值是一个被调用以清除 useEffect 作用的函数

如果您想运行 setResults 在 data 改变时立即执行，请在函数体中执行

React.useEffect(() => {
  setResults(data)
}, [data]);

https://reactjs.org/docs/hooks-effect.html

React 组件更新晚了

React component is updating late

javascript

reactjs

use-effect

use-state