Не удается выполнить обновление состояния React для предупреждения о неустановленном компоненте - PullRequest
Новая
       13

Не удается выполнить обновление состояния React для предупреждения о неустановленном компоненте

0 голосов
/ 14 июня 2019

При получении данных я получаю:

Невозможно выполнить обновление состояния React для неустановленного компонента.

Приложение все еще работает, но реагируетпредполагая, что я могу быть причиной утечки памяти.

Я много искал решение этого предупреждения и внес много изменений (в том числе с использованием состояния isMounting и abortController), но не нашел ничего, что исправляет этодля меня пока.Это связано с тем, что я хочу, чтобы выходные данные API были переменной или константой, чтобы я мог использовать их в другом классе. 

componentDidMount() {
  fetch("https://jirareportsforsolutions.azurewebsites.net/boards")
  .then(response => response.json())
  .then(
    (result) => this.setState(boards = JSON.parse(JSON.stringify(result, null, 2).slice(82, -1)))
  )
  // console.log(boards)
}

componentDidUpdate() {
  if (this.state.selectValues.length > 0) 
    fetch("https://jirareportsforsolutions.azurewebsites.net/sprints/" + boardId)
    .then(response => response.json())
    .then(
      (result) => this.setState(sprints = JSON.parse(JSON.stringify(result, null, 2).slice(68, -1)))
    )
    // console.log(sprints)
  }
}

Это компонент рендеринга, где 'boards »используется в раскрывающемся списке (с использованием пакетаact-dropdown-select), а« sprints »передается в другой класс (StartSprintDropdown): 

render() {
  if (boards == null) {
    noData = "No boards available"
  } 
  return (
    <div>
      <div className="boardDropdown">
        <StyledSelect
          placeholder="Select a board"
          color={this.state.color}
          searchBy={this.state.searchBy}
          clearable={this.state.clearable}
          searchable={this.state.searchable}
          dropdownHandle={this.state.handle}
          dropdownHeight={this.state.dropdownHeight}
          direction={this.state.direction}
          labelField={this.state.labelField}
          valueField={this.state.valueField}
          options={boards}
          dropdownGap={this.state.gap}
          keepSelectedInList={this.state.keepSelectedInList}
          onChange={values => this.setValues(values)}
          noDataLabel={noData}
          closeOnSelect={this.state.closeOnSelect}
          dropdownPosition={this.state.dropdownPosition}
        />
      </div>
      <div>
        <StartSprintDropdown sprints={sprints} boardId={boardId} projectId={projectId} sprintError={sprintError}/>
      </div>
    </div>
  );}
}

Это полное предупреждение, которое отображается:

Предупреждение. Невозможно выполнить обновление состояния React для отключенного компонента.Это> не работает, но это указывает на утечку памяти в вашем приложении.Чтобы исправить, отмените все> подписки и асинхронные задачи в методе componentWillUnmount.

Я не уверен, правильно ли я назначил переменные «boards »и« sprints », поскольку они не являются состояниями, а приложениемработает нормально, хотя вторая выборка (в componentDidUpdate) постоянно извлекается после запуска.

Поскольку я новичок в React, любая помощь с этим и мой код очень ценятся.

1 Ответ

0 голосов
/ 14 июня 2019

Это может происходить из-за того, что где-то вдоль линии ваш компонент разрушается, а затем запускается асинхронный вызов this.setState и печатает это сообщение об ошибке.

Попробуйте добавить это в свой класс, чтобы увидеть,Ваш компонент уничтожается слишком рано: 

componentWillUnmount() {
  console.log('unmounting!!!!')
}
...