Блог

Функциональность : Я хочу изменить свойство объекта типа внутри состояния родительского компонента из метода визуализации дочернего компонента.

Что я пробовал до сих пор: я передал метод своему дочернему компоненту в качестве поддержки от родителя, который, в свою очередь, задает состояние родителя. Ниже несколько строк кода объясняют, чего я пытаюсь достичь.

В методе визуализации моего дочернего компонента у меня есть что-то вроде приведенного ниже

  <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'
     }});
  }
}
 

Наблюдаемое поведение : Свойство элемента не содержит значения, отправляемого как часть заголовка. Он всегда содержит только значение описания (кажется, что второй вызов метода родителю всегда переопределяет первый ).

Кто-нибудь может, пожалуйста, помочь мне понять это поведение? Возможно, мне нужно пересмотреть некоторые основные концепции react. Заранее спасибо. 🙂

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'
     }});
  }
 

Что переопределяет ваше состояние до этого последнего.