当我们在父组件中更改子道具时更新它们

Question

我在 React 类组件中传递道具时遇到了一些问题。

<ProductCard allProducts={this.state.allProducts} />

在这里，我在父组件中使用 allProduct 属性调用 ProductCard 组件。我在 componentDidMount 中获取数据并使用 this.setState() 更新我的 state 中的 allProducts 但在 ProductCard 组件中，我将 allProducts prop 作为空数组获取，这是父组件 this.state.allProducts 中的初始值

但是如果我没记错的话，当我更新状态时，父组件应该重新渲染（确实如此），并且子组件的 prop 值也应该发生变化，但这不会发生。

父组件：

import React, { Component } from 'react'

import ProductCard from "../../Components/Products Card/ProductCard"

export default class SubCategory extends Component {

constructor () {
    super()
    this.state = {
        allProducts:[]
    }
}

componentDidMount = () => {

    let productData = []

    for(var i=0;i<10;i++){
        productData.push({
            productName:`Product ${i+1}`,
            price:"9999" 
        })
    }

    this.setState({allProducts:productData})
}

render() {
    return (
        <>
            <ProductCard allProducts={this.state.allProducts} name={this.state.name} />
        </>
    )
}
}

子组件：

import React, { Component } from 'react'

export default class ProductCard extends Component {

constructor(){
    super()
    this.state = {
        allProducts:[]
    }
}

componentDidMount= () => {
    this.setState({allProducts:this.props.allProducts})
}

render() {
    return (
        <>
           ...
        </>
    )
}
}

任何帮助将不胜感激。谢谢！

Answer 1

在您的子组件中尝试像这样更改您的构造函数：

constructor(props) {
    super(props)
    this.state = {
        allProducts:[]
    }
}

更新：

  render() {
    return (
      <>
        {this.state.allProducts.length > 0 ? (
          <ProductCard
            allProducts={this.state.allProducts}
            name={this.state.name}
          />
        ) : null}
      </>
    );
  }