javascript - 当我们在父组件中更改子道具时更新它们
问题描述
我在 React 类组件中传递道具时遇到了一些麻烦。
<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 (
<>
...
</>
)
}
}
任何帮助,将不胜感激。谢谢!
解决方案
在您的子组件中,尝试像这样更改您的构造函数:
constructor(props) {
super(props)
this.state = {
allProducts:[]
}
}
更新:
render() {
return (
<>
{this.state.allProducts.length > 0 ? (
<ProductCard
allProducts={this.state.allProducts}
name={this.state.name}
/>
) : null}
</>
);
}
推荐阅读
- html - :checked 选项的工作方式与复选框的工作方式不同(内部代码)
- javascript - 如何将 aws 秘密管理器与 nodejs lambda 一起使用
- php - Php PDO bindParam 没有将正确的数据返回到数据库
- c - 64 位内核不支持带有 .code64 汇编程序的 IA-32 应用程序吗?
- python - 更改字符串中的元素
- python - 将 end= 添加到 print() 时,time.sleep 无法按预期工作
- reactjs - React 中的 Typography 组件到底是什么?
- node.js - 在循环nodejs中返回API请求
- javascript - php项目未捕获TypeError:Ajax不是函数
- c++ - 对智能指针向量使用 push_back 方法时应用程序崩溃