React 功能组件状态变化不会触发子组件重新读取其 props

Posted 2023-03-16

【中文标题】React 功能组件状态变化不会触发子组件重新读取其 props

【英文标题】：React functional component state change does not trigger child component to re-read its props

【发布时间】：2020-02-17 08:18:09

【问题描述】：

我有这个 React 功能组件。我们知道，从 v16.8 开始，功能组件具有某种“状态”。它使用 useEffect 来“setState”来声明变量products。 然后我将 product 作为子组件 *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>
    );

孩子：

class ProductGrid extends Component 

    constructor(props) 
        super(props);
        this.state =  products: this.props.products;
        console.log("ProductGrid.props.products: ", this.props);
    

    componentDidUpdate(prevProps, prevState, snapshot) 
        console.log("Grid did update, products: ", this.state.products);
    

结果： 当父组件中的数据发生变化时，我可以（在控制台中）看到子组件（ProductGrid）也被重新渲染，但它的属性变量“products”不是。它始终是一个空数组。这是什么原因？这是否意味着功能组件的状态与遗留状态不同？ 有没有办法克服这个问题？

非常感谢。

【参考方案1】：

你的问题就行了

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

在这里，您正在记录子组件的状态。构建子组件时，您将prop.products 复制到state.products。然后，当prop.product 发生更改时，您不会更新状态以反映该更改，而是继续打印传递给组件的products 的初始值。

这里的解决方案是使用this.props.products 而不是this.state.products。