我有一个父级 React 组件,它有 3 个子组件,我正在更改父组件中的状态,但更改父组件中的状态并不会更改子组件中的 props。我将状态从父组件传递到子组件,但子组件内部的 props 没有改变。
我的父组件
class Parent extends Component {
state = {
menuCategoryId:'',
}
handelOnClickRefundMenu = () => {
this.setState({menuCategoryId:''});
}
render() {
return (
<FoodMenu
menuCategories={menuCategories}
{...this.state}
/>
)
}
}
export default Parent;
子 1 组件
class FoodMenu extends Component {
render() {
return (
<MenuCategories
MenuCategories={menuCategories.MenuCategories}
selectedMenuCategoryId={this.props.menuCategoryId}
/>
);
}
}
export default Child1;
子 2 组件
class MenuCategories extends React.Component{
render(){
const MenuCategories = this.props.MenuCategories;
const selectedMenuCategoryId = this.props.selectedMenuCategoryId;
const renderCategories = (MenuCategories) => (
MenuCategories ?
MenuCategories.map(card=>(
<MenuCategory
key={card._id}
{...card}
handleOnClickMenuCategory={this.props.handleOnClickMenuCategory}
selectedMenuCategoryId={this.props.selectedMenuCategoryId}
// propData={...this.props}
/>
))
:null
)
return (
<Fragment>
<div id="" className="food-menus-menu w-100">
<div className="row">
<OwlCarousel
className="owl-theme"
loop={true}
items={9}
autoplay={false}
autoplayTimeout={3000}
autoplayHoverPause={false}
nav={true}
navElement={'div'}
navText={[`<img src=${seventheenPng}>`,`<img src=${eitheenPng}>`]}
dots={false}
responsive={{
0:{
items:4
},
600:{
items:3
},
1000:{
items:7
}
}}
>
{MenuCategories ?
MenuCategories.length === 0 ?
<div className="no_result">
Sorry, no results
</div>
:null
:null}
{ renderCategories(MenuCategories)}
</OwlCarousel>
</div>
</div>
</Fragment>
)
}
};
export default MenuCategories;
子 3 组件
class MenuCategory extends Component {
render() {
const props = this.props;
console.log('The values of the props are not changing here')
console.log(props.selectedMenuCategoryId)
return (
<div className={`colCategory item`} onClick={()=>props.handleOnClickMenuCategory(props)}>
<button
className={`btn btn-primary w-100 py-2 d-inline-flex align-items-center justify-content-center ${props.selectedMenuCategoryId === props._id ? 'activeMenuCategory' : ''}`}>
{props.name}
</button>
</div>
);
}
}
export default MenuCategory;
当我更改时, map 函数内的最后一个组件中的 Prop “props.selectedMenuCategoryId”的值不会改变我的父类函数中的状态handelOnClickRefundMenu
Map 函数位于子组件 2 MenuCategories 内。
请帮我解决这个问题。
提前致谢。
最佳答案
所有关于使用生命周期方法强制重新渲染的答案都是错误的。如果你正确地传递了 props 并且它们发生了变化,你的子组件应该自动重新渲染。
为了证明这一点,here's a quick'n'dirty sandbox它有一个 parent 和两个 child ,可以根据您的需要传递一个 Prop 。
我不知道您的代码到底出了什么问题(我们可以运行和调试的独立示例在这里会有所帮助),但我建议将其还原为一个更简单的情况,您可以开始工作然后构建从那里开始。
eta:您确定问题与您的点击处理程序无关吗?您没有将其传递给 FoodMenu 或 MenuCategories。
关于javascript - 更改reactJs父组件中的状态并不会更改react子组件中的props,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56186139/