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 函數的返回值是一個函數，它被調用來清除 useEffect 的作用

如果您想在data更改后立即運行 setResults，請在函數體中執行此操作

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

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