无法对卸载的组件警告执行React状态更新

Question

在获取数据时我得到：

无法对卸载的组件执行React状态更新。

该应用程序仍然有效，但反应表明我可能会导致内存泄漏。

我已经搜索了很多关于这个警告的解决方案并进行了很多更改（包括使用isMounted状态和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)
  }
}

这是渲染组件，其中'board'在下拉列表中使用（使用react-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方法中的所有>订阅和异步任务。

我不确定我是否正确分配了'board'和'sprints变量，因为它们不是状态但应用程序工作正常，尽管第二次获取（在componentDidUpdate中）一旦触发就不断取出。

由于我是新手React的任何帮助，我的代码非常感谢。

Answer 1

这可能会发生，因为沿线的某个地方，您的组件被破坏，然后运行对此.setState的异步调用并打印此错误消息。

尝试将此添加到您的类中，以查看您的组件是否过早被销毁：

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