reactjs - React js从子Render方法设置父组件的状态

Question

功能：我想从子组件的渲染方法中更改父组件状态中对象类型的属性。

到目前为止我尝试了什么：我已经将一个方法作为来自父组件的道具传递给我的子组件，这反过来又设置了父组件的状态。下面几行代码解释了我想要实现的目标。

在我的子组件的渲染方法中，我有类似下面的东西

 <label>{this.setStateKey("title",item,mode)}</label>
 <label>{this.setStateKey("description",item,mode)}</label>

在可以将标题或描述作为参数的孩子的 setStateKey 方法中，我已经放置了从父级传递的方法。

this.props.changeParentState({title/description},item)

在我的父组件中，我有对象类型的状态属性，它由两个属性标题和描述组成

this.state = {
  item: {
   title:"",
   descripion:""
  }
}

现在在父组件的 changeParentState 方法中，我正在使用扩展运算符更改状态

changeParentState=(key,value)=>
{
  if(key === "title")
  {
     this.setState({ item: {
        ...this.state.item,
        title: 'value'
     }});
  }
  if(key === "description")
  {
     this.setState({ item: {
        ...this.state.item,
        description: 'value'
     }});
  }
}

观察到的行为：item 属性不包含作为标题的一部分发送的值。它总是只保存描述值（似乎对父级的第二个方法调用总是覆盖第一个）。

谁能帮我理解这种行为？可能我需要重新审视一些反应核心概念。提前致谢。:)

标签： reactjsreact-state-management

Answer 1

TL; DR 第一行：

<label>{this.setStateKey("title",item,mode)}</label>

将状态设置为title但然后是第二行：

<label>{this.setStateKey("description",item,mode)}</label>

覆盖相同的状态description
您可以尝试删除第二行并查看您的状态是否设置title为

---

这是您的代码如何执行的概要，首先是这一行：

 <label>{this.setStateKey("title",item,mode)}</label>

调用该函数，该函数setStateKey()调用该函数this.props.changeParentState({title/description},item)并执行它的这一部分：

if(key === "title")
  {
     this.setState({ item: {
        ...this.state.item,
        title: 'value'
     }});
  }

这会将您的状态设置为所需的状态。
但随后执行第二行：

<label>{this.setStateKey("description",item,mode)}</label>

与之前setStateKey()调用执行此函数的方法一样，this.props.changeParentState({title/description},item)现在执行此部分代码：

  if(key === "description")
  {
     this.setState({ item: {
        ...this.state.item,
        description: 'value'
     }});
  }

这会将您的状态覆盖到最后一个状态。