Question

单击按钮时，将进行API调用（由setTimeout模拟），完成后，该项将从状态中删除。我希望组件不会尝试渲染，但它会失败，因为它需要的状态不再存在。

显示所需行为的

The first fiddle有效，因为对调度的调用是同步的：

dispatch({
  type: 'REMOVE',
  id
});

The second fiddle显示错误，因为对调度的调用是异步调用的：

setTimeout(() => {
  dispatch({
    type: 'REMOVE',
    id
  });   
 }, 0);

我假设父组件将不再尝试呈现子组件，因为该项已从数组中过滤掉。如何从状态中删除项目并阻止组件尝试重新渲染？

Answer 1

是的，这是一个问题，因为默认情况下redux不支持异步调用，所以你要找的是redux-thunk

https://github.com/gaearon/redux-thunk

向下滚动到动机，它基本上会与您在此处发布完全相同的代码。

::: EDIT :::

根据您在下面的评论我更新了您的代码我认为问题的主要来源之一是将Item组件与地图状态连接到道具。

const mapStateToProps = (state, { id }) => {
    var {text} = state.items.filter((x) => x.id === id)[0];
    return {
    id: id,
    text: text
  };
};

const mapDispatchToProps = (dispatch) => {
    return {
    onRemove(id) {
        setTimeout(() => {
        dispatch({
            type: 'REMOVE',
          id
        }); 
     }, 0);
    }
  };
 };

我知道你可能不需要它/或者想要它但是我稍微重构了一下代码以使它更清晰但我可能已经被带走并把它带到远离你原来的例子但是如果你想看看它贴在这里。

https://jsfiddle.net/kriscoulson/ogkyspsp/

Redux异步分派导致连接组件错误

1 个答案: