时间戳

首页 > 解决方案 > 更新 redux 状态不会触发重新渲染（也不会更新状态）

javascript - 更新 redux 状态不会触发重新渲染（也不会更新状态）

问题描述

我对 Redux 很陌生，我遇到了一些问题。

我正在创建组件中的项目列表，将其发送到 redux 状态，然后我想从该 redux 状态读取并在不同的列表组件中显示项目。

创建部分可以正常工作console.log并且getState()没有问题（我看到了 Redux State 的变化）。

我的问题是我的组件状态没有改变，也没有重新渲染。

现在一些代码->

this.state = {
    initialItems: this.props.SharepointItems,
}

最后

const mapStateToProps = (state) => {
    return {
        SharepointItems: state.listItems,
    }
}

export default connect(mapStateToProps)(SharePointList);

我什至在我的componentDidMount()->中尝试过这样的事情

    store.subscribe(() => {
        this.setState({ initialItems: this.props.SharepointItems });
        console.log("updating state");
    });

从我读过的内容来看，我不应该在使用 redux 时手动更新状态，还是我错了？

console.log编辑：因为如果我可以看到数组为空（这是我在 Redux 状态中定义的），我的列表不会引发错误。我应该做些什么来获得新的状态吗？似乎它获得了不可变状态或类似的东西（空数组）。

Edit2：找到问题（或部分问题）。看来我的状态落后了 1 个事件。所以 redux 包含有 4 个项目的数组，组件状态为空。如果我从浏览器进行调度，我会在 redux 中得到 5 个项目（如预期的那样），但有 4 个处于状态（最终显示为非空）。

我的代码也有点错误（我传递的是整个数组而不是数组中的项目）。

我已将其更改为

        result.map((item) => {
            store.dispatch(addListItem(item));
        });

它开始渲染。问题是它显示了从 0 到 2 的项目（数组中的 4 个），但最后一个被留下了。再一次，如果我从浏览器进行另一次调度，我会渲染第 3 项，但第 4 项（添加的最后一项）仅处于 redux 状态并且不会更新列表状态。

另外......这样做是个好主意吗？我的列表将来可能有 1000 个项目，我不确定调度是一个好的解决方案（我需要先调用 API 来获取项目，这就是我使用调度来填充 redux 的原因）。

用减速器更新->

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_LISTITEM:
            return { ...state, listItems: [...state.listItems, action.payload] };
        case ADD_SPOTOKEN:
            return { ...state, spoToken: action.payload };
        default:
            return state;
    }
};

export default rootReducer;

又发现了一些奇怪的东西。我也在使用 React 路由器。正如我所说，我的列表只显示了我的 Redux State 数组中的 4 个项目中的 3 个。如果我导航到不同的页面，然后返回到列表页面，它实际上会呈现所有 4 个项目。

标签： javascriptreactjsredux

解决方案

我相信您的问题源于您已经“分叉”SharepointItems并将props其设置为组件的 local this.state。除非你真的需要，否则我建议不要这样做。只需使用this.props. Dan Abramov（Redux 的作者）也建议将此作为一般原则。

通过将 props 分叉到 state 上，您可以创建关于 的状态的两个真相来源SharepointItems，即this.state.initialItems和this.props.SharepointItems。然后，您有责任通过实施来保持this.state同步this.props（componentDidUpdate这就是您没有看到它更新的原因）。您只需使用从props.

每当您更新商店时，该connect功能都会使用新组件重新渲染您的组件。因此，在您的方法中，只需参考而不是. 那么你应该很高兴，也就是说，假设你已经实现了你的减速器并正确地存储了配置。propsreduxrenderthis.props.SharepointItemsthis.state.initialItems

推荐阅读