组件在存储中删除后不会卸载 [英] Component is not unmount after its delete in store

问题描述

项目 (Todolist) 是使用 immutable 库创建的，

<小时>

它有测试

<小时>

看起来reducer返回改变的数据，但我使用immutablejs，之前我使用normalizr-immutable，但我认为这个库中的问题来源并编写了我自己的normalizeInitialState(来源)，它没有帮助，现在我认为可能是 redux-immutable

中的问题来源<小时>

我一整天都在努力解决这个问题

<小时>

redux 的创建者说

<块引用>

我认为这是我们无法解决的问题.反应状态变化是异步和 React 可能(也可能不会)批处理它们.因此，该当你按下Remove"时，Redux 存储更新，Item 和应用程序接收新状态.即使 App 状态改变导致卸载项目，这将晚于 mapStateToProps 发生要求物品.

除非我弄错了，否则我们无能为力.您有两个选择:

在 App(或更低，例如 ItemList)级别请求所有必需的状态并将其传递给哑"项目.为 mapStateToProps 添加保护措施用于当前卸载"状态.例如，您可能会返回 null在这种情况下来自渲染.可能我们可以拥有组件如果 mapStateToProps 由 connect() 生成从其渲染返回 null返回空值.这有意义吗?是不是太意外了?

嗯，我从来没有看到像 return (<div></div>) 这样的存根或其他代码中 mapStateToProps 中的保护措施

解决方案

markerikson

<块引用>

我不完全确定我是否遵循您的问题，但作为猜测:听起来子组件正在重新渲染之前父母是.这是 React-Redux v4 及更早版本的已知问题.这v5 beta 修复了这个问题.尝试安装 react-redux@next 看看是否这可以解决您的问题.

Project (Todolist) was created with immutable library, source here

Store structure: project have many tasks, In redux store: State - map, projects, tasks - Records

When I asyncly remove project ...

export const removeProject = project => (dispatch) => {
  if (!isProjectExist(project)) return Promise.resolve()
  return projectService
    .delete(project)
    .then(
      () => {
        dispatch(remove(project))
        console.log("post removeProject resolved")
      },
      handleError,
    )
}

.... that was created after initialization - it will be deleted and properly unmounted, but when project was passed as initialState - ProjectList will not be rerendered, and ProjectItem try to render itself with stale data, and fail, as in picture

---

It have tests

---

It looks like reducer returs changed data, but I use immutablejs, and previously i use normalizr-immutable, but I thought that source of issue in this library and write my own normalizeInitialState (source), it did not help, now I think that maybe source of problem in redux-immutable

---

I struggled entire day on solving of this problem

---

creator of redux says

I don't think this is something we can fix. React state changes are asynchronous and React may (or may not) batch them. Therefore, the moment you press "Remove", the Redux store updates, and both Item and App receive the new state. Even if the App state change results in unmounting of Items, that will happen later than mapStateToProps is called for Item.

Unless I'm mistaken, there is nothing we can do. You have two options:

Request all required state at App (or a lower, e.g. ItemList) level and pass it down to "dumb" Items. Add safeguards to mapStateToProps for "currently unmounting" state. For example, you may return null from render in this case. Potentially we could have the component generated by connect() return null from its render if mapStateToProps returned null. Does this make any sense? Is this too surprising?

Hm, I never saw stubs like return (<div></div>) or safeguards in mapStateToProps in others code

解决方案

markerikson

I'm not entirely sure I follow what exactly your problem is, but as a guess: it sounds like the child component is re-rendering before the parent is. This is a known issue with React-Redux v4 and earlier. The v5 beta fixes that issue. Try installing react-redux@next and see if that takes care of your problem.

这篇关于组件在存储中删除后不会卸载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！