父類狀態改變時如何重新加載子組件

Question

在父類中，我將項目傳遞給子組件。

<InfoWidget bar={this.state.bar}> 
</InfoWidget>

然后，接收數據並在此處使用prop.bar

const InfoWidget = (props) =>{
  const [length, setLength] = useState([]);
  const classes = useStyles();
  useEffect(() => {
 
    setLength( props.bar * 10);
  }, []);
  return(
    <Paper> 
     {length}
    </Paper>
  );
}

第一次加載效果很好，但是當父類的 state.bar 發生變化時，不會重新加載子組件。

我想重新加載子組件，每次父類的值發生變化時。

我應該在哪里改變？

Answer 1

將其添加為依賴項：

useEffect(() => {
  setLength(props.bar * 10);
}, [props.bar]);

Answer 2

將 key 添加到 parent，當key發生變化時，它會重新渲染組件

<InfoWidget key={this.state.bar} bar={this.state.bar}> 
</InfoWidget>