React使用useState向子组件传值显示为空，如何让子组件正常重渲染？

问题根源 #

你的代码出现该问题的核心原因是子组件没有同步父组件传入的props更新：

• 子组件的内部stateresult仅在首次渲染时用props.dataObject初始化，此时父组件的socket请求还未返回数据，response是空数组，所以result初始值为空。
• 你写的useEffect依赖项是子组件内部的result，父组件后续更新props.dataObject时不会触发这个effect，因此result永远不会同步最新的父组件数据。
• 直接读取result[0]在空数组状态下会得到undefined，页面自然显示空白。

推荐解决方案 #

方案1：直接使用props（优先选择，减少冗余state） #

如果子组件不需要对传入的数据做单独的内部修改，完全不需要额外定义内部state，直接使用props即可，props变化会自动触发子组件重渲染：

import './Main.css';

function Main(props) {
  return <div className="container">
    {/* 加加载判断避免空白 */}
    {props.dataObject.length > 0 ? props.dataObject[0].currencyPairName : '数据加载中...'}
    <div id="palceholder1" className="placeholder">hello</div>
    <div id="palceholder2" className="placeholder"></div>
    <div id="palceholder3" className="placeholder"></div>
  </div>;
}

export default Main;

方案2：需要保留子组件内部state的写法 #

如果确实需要在子组件内部维护独立的state，要增加对props.dataObject的监听，props更新时同步到内部state：

import './Main.css';
import React from 'react';

function Main(props) {
  const [result, setResult] = React.useState(props.dataObject);

  // 监听父组件传入的dataObject变化，同步更新内部state
  React.useEffect(() => {
    setResult(props.dataObject);
  }, [props.dataObject]);

  return <div className="container">
    {result.length > 0 ? result[0].currencyPairName : '数据加载中...'}
    <div id="palceholder1" className="placeholder">hello</div>
    <div id="palceholder2" className="placeholder"></div>
    <div id="palceholder3" className="placeholder"></div>
  </div>;
}

export default Main;

额外优化建议 #

父组件socket连接的useEffect里建议加清理函数，组件卸载时断开socket连接，避免内存泄漏：

useEffect(() => {
  const socket = socketIOClient(ENDPOINT);
  socket.on("tick", (data) => {
    setResponse(data);
  });
  // 清理函数
  return () => {
    socket.disconnect();
  }
}, []);

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