Question

在React类组件中传递prop时遇到一些麻烦。

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

在这里，我用父组件中的allProduct属性调用ProductCard组件。我要在componentDidMount中获取数据并使用this.setState（）更新状态下的allProducts，但是在ProductCard组件中，我将allProducts属性作为空数组获取，这是父组件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}
      </>
    );
  }

在“父级组件”中更改子道具时更新子道具

1 个答案: