Reactjs &引用；Can'；t对未安装的组件执行React状态更新“；当我从数组中删除，但可以很好地更新数组时

我有一个

ExperienceGrid

，它呈现一个

ExperienceSingle

列表

class ExperienceGrid extends React.Component {

  state = {
    experiences: []
  }

  componentDidMount() {
    //call the API and insert the values to state.experiences
    fetchUserJobExperiencesApi(this.props.api)
      .then(resp => {
        this.setState({
          requestCompleted: true,
          experiences: resp.data._embedded.userJobs
        });
      })
      .catch(err => {} )

  }

  updateExperiencesState_delete = experience => {
      const newExp = pull(this.state.experiences, experience); //pull from Lodash
      this.setState({
        experiences: newExp
      });
    };

    updateExperiencesState_add = experience => {
      this.setState(prevState => {
        return { experiences: prevState.experiences.concat(experience) };
      });
    };

  render(){

    const { experiences} = this.state;

    return(
      <>
      ////other JSX code
      <ul> {
          experiences.map(experience => (
            <li key={experience.userJobId}>
              <ExperienceSingle 
                experience={experience} 
                updateExperiencesState_delete={this.updateExperiencesState_delete}
              />
          </li>
        ))
      }</ul>

    </>
    )

  }

}

调用

updateexperiencestate\u delete

的那一刻，列表将被该元素缩减，但我也在控制台中看到一条警告

警告：无法对已卸载的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。 在ExperienceSingle（位于ExperienceGrid.js:105） 在li中（位于ExperienceGrid.js:104）index.js:1446 反应6 HandleDelete体验Single.js:99

updateexperiencestate\u add

是从

NewExperience

调用的，工作正常。列表删除是个问题

根据我的猜测，卸载的组件（警告中）就是被删除的组件。对吧?

有什么想法吗。我做错了什么？正确的方法是什么

updateexperiencestate\u delete（experience）

调用将导致删除此项（在父级

setState

）

//更新某些状态

-

将调用此.setState（）

，但由于异步

设置状态

性质更改延迟到下一次渲染（简而言之-请参阅生命周期）

卸载将首先发生-然后通过尝试更新已卸载组件的状态作出反应失败，这就是错误的原因

删除时不

setState

-这没有意义。

您可以自由地将api调用移动到父级，失败时可以传递错误状态（如果为单个项显示错误是有意义的，通常这是一个顶级通知）

---

项（在列表上）不应处理自身的删除。

将api调用移动到

updateexperiencestate\u delete

@xadm这会有什么不同？此外，我无法移动api调用，因为在promise resolve/error中，我需要更新

ExperienceSingle

>No setState on delete的状态-这没有意义->感谢您的建议。>项目（在列表上）不应处理自身的删除。->是的，这很有意义。那么编辑经验呢？它应该是父组件或组件本身的责任？通过删除对容器的操作，您可以将项（表示/视图组件）简化为功能性、无状态组件-这并不意味着它不能包含另一个容器（更深层的关系数据）。通常，

容器

和（视图）

组件

在单独的文件夹中进行管理-角色不同。

export default class ExperienceSingle extends Component {

  handleDeletion = () => {
      const { experience, updateExperiencesState_delete } = this.props;
      axios({
        method: "DELETE",
        baseURL: experience._links.self.href
      })
        .then(respose => {
          updateExperiencesState_delete(experience); //remove from ExperienceGrid state
          //update some state of this component
        })
        .catch(error => { //update some state of this component  });
    };

    render(){
      return(
        <>
        ////other Code
        <Confirm
          onCancel={this.closeModal}
          onConfirm={this.handleDeletion}
        />
        </>
      )
    }

}

    .then(respose => {
      updateExperiencesState_delete(experience); //remove from ExperienceGrid state
      //update some state of this component
    })