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

【问题标题】：React functional component state change does not trigger child component to re-read its propsReact 功能组件状态变化不会触发子组件重新读取其 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”不是。它始终是一个空数组。这是什么原因？这是否意味着功能组件的状态与遗留状态不同？有没有办法克服这个问题？

非常感谢。

【问题讨论】：

标签： reactjs state react-hooks use-effect react-functional-component

【解决方案1】：

你的问题就行了

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

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

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

【讨论】：