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

这是渲染组件，其中在下拉菜单中使用“ boards”（使用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方法中取消所有>订阅和异步任务。

我不确定是否正确分配了'boards'和'sprints变量，因为它们不是状态，但应用程序运行良好，尽管第二次获取（在componentDidUpdate内）在触发后不断获取。

由于我是React的新手，因此我的代码受到极大的赞赏。

Answer 1

之所以会发生这种情况，是因为在生产线的某个地方，您的组件被破坏了，然后对this.setState的异步调用开始运行并打印此错误消息。

尝试将其添加到您的类中，以查看组件是否被过早破坏：

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

无法在未安装的组件上执行React状态更新警告

1 个答案: