React父组件state变更时如何触发子组件自动重新加载？

你当前子组件无法响应父组件bar值更新的核心问题是useEffect的依赖数组为空：空依赖的useEffect只会在组件首次挂载完成后执行1次，后续props.bar发生变化时不会重新触发回调，length状态也就不会同步更新。

提供两种可行方案，可按需选择：

方案1：补全useEffect依赖项 #

只需将props.bar添加到useEffect的依赖数组中，即可实现每次props.bar变化时自动重新执行回调，更新length数值：

const InfoWidget = (props) =>{
  const [length, setLength] = useState([]);
  const classes = useStyles();
  useEffect(() => {
    setLength(props.bar * 10);
  }, [props.bar]); // 此处添加props.bar作为依赖
  return(
    <Paper> 
     {length}
    </Paper>
  );
}

方案2：移除冗余状态（更优化的写法） #

你的length是完全由props.bar计算得到的派生值，不需要单独用state存储，直接在渲染时计算即可，代码更精简也不会出现依赖遗漏问题：

const InfoWidget = (props) =>{
  const classes = useStyles();
  const length = props.bar * 10;
  return(
    <Paper> 
     {length}
    </Paper>
  );
}

内容的提问来源于stack exchange，提问作者whitebear