Reactjs React功能组件状态更改不会触发子组件重新读取其道具

我有一个功能组件。我们知道，自v16.8以来，功能组件具有某种“状态”。它使用useEffect“设置状态”来状态变量产品。 然后我将产品作为子组件*ProductGrid”的道具传递。 我将ProductOfCategory作为父组件，它将从URL获取数据，并将结果设置为状态变量“products”。我希望子组件ProductGrid能够读取该数据（更改），因此我将其设置为如下所示

家长：

    export default function ProductOfCategory() {

    let { categoryId } = useParams();
    const [products, setProducts] = useState([]);

    useEffect(() => {
        fetch('/products/cat/' + categoryId)
            .then(response => response.json())
            .then(data => {
                setProducts(data);
                console.log("Fetch me: ", data);
            });
    }, [categoryId]);


    return (
        <div>
            <h3>ID: {categoryId}</h3>
            <ProductGrid products={products} />
        </div>
    );
}

结果: 当父级中的数据更改时，我可以看到（在控制台中）子组件（ProductGrid）也被重新呈现，但其prop变量“products”不是。它始终是一个空数组。这是什么原因？这是否意味着功能组件的状态不同于遗留状态？ 有没有办法克服这个问题

---

非常感谢。

你的问题就在眼前

console.log("Grid did update, products: ", this.state.products);

这里您正在记录子组件的状态。当您构建子组件时，您将

prop.products

复制到

state.products

。然后当

prop.product

更改时，您不会更新状态以反映该更改，您将继续打印传递给t的

products

的初始值他喜欢这个部件

这里的解决方案是使用

this.props.products

而不是

this.state.products

console.log("Grid did update, products: ", this.state.products);