0

我有这个 React 功能组件。我们知道，从 v16.8 开始，功能组件具有某种“状态”。它使用 useEffect 来“setState”来声明变量products。然后我将产品作为子组件 *ProductGrid 的道具传递。我将 ProductOfCategory 作为父组件，它将从 URL 获取数据并将结果设置为状态变量“产品”。我希望子组件 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”不是。它始终是一个空数组。这是什么原因？这是否意味着功能组件的状态与遗留状态不同？有什么办法可以克服这个吗？

非常感谢。

4

1 回答 1

1

你的问题在线

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

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

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

于 2019-10-21T09:20:31.993 回答