React js從子渲染方法設置父組件的state

Question

功能：我想從子組件的渲染方法更改父組件的 state 內的 object 類型的屬性。

到目前為止我嘗試了什么：我已經將一個方法作為來自父組件的道具傳遞給我的子組件，這反過來又設置了父組件的 state。 下面幾行代碼解釋了我想要實現的目標。

在我的子組件的渲染方法中，我有類似下面的東西

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

在可以將標題或描述作為參數的孩子的 setStateKey 方法中，我已經放置了從父級傳遞的方法。

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

在我的父組件中，我有 object 類型的 state 屬性，它由兩個屬性標題和描述組成

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

現在在父組件的 changeParentState 方法中，我正在使用擴展運算符更改 state

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 屬性不包含作為標題的一部分發送的值。 它總是只保存描述值（似乎對父級的第二個方法調用總是覆蓋第一個）。

誰能幫我理解這種行為？ 可能我需要重新審視一些反應核心概念。 提前致謝。 :)

Answer 1

TL; DR 第一行：

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

將 state 設置為title ，然后是第二行：

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

覆蓋相同的 state 以進行description
您可以嘗試刪除第二行，看看您的 state 是否設置為title

---

這是您的代碼如何執行的概要，首先是這一行：

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

調用 function setStateKey()調用this.props.changeParentState({title/description},item)並執行它的這一部分：

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

根據需要設置您的 state。
但隨后執行第二行：

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

與之前調用setStateKey()一樣，它執行此 function this.props.changeParentState({title/description},item)現在執行這部分代碼：

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

它將您的 state 覆蓋到最后一個。