React组件渲染时useEffect未触发，隐藏后才执行的问题

问题根源 #

1. useEffect回调的异步写法错误 #

你在useEffect中直接返回了一个async函数，但React对useEffect的回调有明确要求：回调要么返回一个同步的清理函数，要么不返回任何值。async函数会返回Promise，React会错误地将这个Promise当作清理函数，只有当组件卸载时才会处理它，这就是你看到「组件卸载时useEffect逻辑执行」的原因。

2. 渲染阶段的同步代码可能抛出异常 #

const db = read(file)在组件每次渲染时同步执行，当deepDiving首次变为true时，ddFile的初始值是null，如果read(null)会抛出错误，会导致组件渲染失败——组件挂载流程中断，useEffect自然不会触发。

修复步骤 #

1. 修正useEffect的异步写法 #

不要让useEffect的回调直接是async函数，改为在回调内部定义并调用异步函数：

useEffect(() => {
  async function add() {
    // 你的异步逻辑代码
  }
  add(); // 主动调用异步函数
}, [file]);

这样useEffect的回调返回undefined，符合React的要求，不会被误判为清理函数。

2. 调整read(file)的执行时机并处理空值 #

read(file)如果是同步操作，需先判断file是否有效，避免渲染阶段报错；如果是异步操作，必须放到useEffect中执行，绝对不能在渲染阶段同步调用：

const DeepDive = ({ ddFile: file }) => {
  const [ary, setAry] = useState([]);
  const [db, setDb] = useState(null);

  // 仅当file存在且变化时，执行read操作
  useEffect(() => {
    if (!file) return;
    const loadedDb = read(file);
    setDb(loadedDb);
  }, [file]);

  // 基于db的状态执行异步逻辑
  useEffect(() => {
    async function add() {
      if (!db) return;
      // 这里编写你的异步逻辑，比如从db获取数据更新ary
    }
    add();
  }, [db]);

  return (
    <table>
      <tbody>
        <tr><th>Name</th><th>Rank</th></tr>
        {ary.map((m, i) => <DeepDiveRow key={i} {...{ m }} />)}
      </tbody>
    </table>
  );
};

3. 验证父组件的ddFile状态 #

确保当deepDiving切换为true时，ddFile已经被Summary组件正确设置为有效的文件对象。如果此时ddFile仍是null，即使修复了上述问题，useEffect内的逻辑也会因空值判断而跳过，看起来像是未触发。

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