Question

我有这个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）也被重新渲染，但其prop变量“ products”却没有。它总是一个空数组。这是什么原因呢？这是否意味着功能组件的状态不同于传统状态？有什么办法可以克服吗？

非常感谢。

Answer 1

您的问题在线了

@Given("^User enters a valid username(\\d+)$")
public void user_enters_a_valid_username(Integer int1) {
    System.out.println("user_enters_a_valid_username2");
}

这里您正在记录子组件的状态。构造子组件时，将console.log("Grid did update, products: ", this.state.products);复制到prop.products。然后，当state.products发生更改时，您不会更新状态以反映该更改，而是继续打印传递给组件的prop.product的初始值。

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

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

1 个答案: