React中useEffect Hook传递Props数据无法渲染复用表格组件问题

核心问题在于父组件异步获取数据的时机晚于子组件初始渲染，加上子组件可能存在「不必要的内部状态」或「useEffect依赖配置错误」，导致props更新时无法触发子组件重渲染。页面刷新后，子组件先拿到空的products，后续父组件拿到数据更新props，但子组件没同步响应这个变化。

1. 直接使用props渲染（推荐） #

如果子组件仅做数据展示，完全不需要把props转成内部状态，直接用props.products渲染即可：

// 子组件 Table.js
const Table = ({ products }) => {
  // 处理空数据，避免空白
  if (!products?.length) {
    return <div>加载中...</div>;
  }

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        {products.map(product => (
          <tr key={product.id}>
            <td>{product.id}</td>
            <td>{product.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

这种方式下，父组件products更新时，子组件会自动重渲染，无需额外处理。

2. 必须用内部状态时，正确监听props更新 #

如果子组件需要维护本地状态（比如筛选、排序），要确保useEffect能精准响应props变化：

// 子组件 Table.js
import { useState, useEffect } from 'react';

const Table = ({ products }) => {
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    // 仅当products有数据时更新内部状态
    if (products?.length) {
      setTableData(products);
    }
  }, [products]); // 依赖项必须包含products，props变化时触发

  if (!tableData.length) {
    return <div>加载中...</div>;
  }

  return (
    <table>
      {/* 渲染tableData */}
    </table>
  );
};

同时要避免父组件每次渲染都生成新的products引用（比如API返回的数组），可以用useMemo缓存：

// 父组件 Parent.js
import { useState, useEffect, useMemo } from 'react';
import Table from './Table';

const Parent = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('/api/products');
      const data = await res.json();
      setProducts(data);
    };
    fetchData();
  }, []);

  // 缓存products，避免每次渲染生成新引用
  const memoizedProducts = useMemo(() => products, [products]);

  return <Table products={memoizedProducts} />;
};

1. 页面刷新初始渲染：
   • 父组件初始化products为空数组，传给子组件。
   • 子组件拿到空值，渲染加载提示或空表格。
2. 父组件API请求完成：
   • 父组件调用setProducts更新状态，触发自身重渲染。
   • 父组件将更新后的products传给子组件。
   • 若子组件直接用props：自动重渲染展示数据；若用useEffect监听products：依赖变化触发useEffect，更新内部状态后重渲染。

之前手动修改依赖项能显示，本质是强制触发了useEffect执行，而页面刷新后回到初始状态，说明原依赖配置缺失或products引用不稳定。

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