提问者:小点点

无法对未安装的组件执行反应状态更新警告


当获取数据时,我得到:

无法对未安装的组件执行React状态更新。

该应用程序仍然有效,但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)
  }
}

这是一个渲染组件,其中在下拉列表中使用“板”(使用react-dropdown-选择包),并且“冲刺”被传递到另一个类(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状态更新。这是

我不确定我是否分配了'板'和'冲刺变量正确,因为它们不是状态,但应用程序工作正常,尽管第二次抓取(在组件内)不断抓取一旦触发。

因为我是新来的,所以对此有任何帮助,我的代码非常感谢。


共1个答案

匿名用户

这可能是因为在这条线的某个地方,您的组件正在被销毁,然后运行对this.set状态的异步调用并打印此错误消息。

尝试将其添加到类中,以查看组件是否过早销毁:

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