更新redux状态不会触发重新渲染(也不会更新状态)

时间:2018-12-05 16:04:02

标签: javascript reactjs redux

我对Redux还是很陌生,并且遇到了一些问题。

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

创建部分可以console.loggetState()正常工作,而不会出现问题(我看到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项(最后添加的第4项)仅处于还原状态,而不会更新列表状态。

也...这样做是个好主意吗?我的列表将来可能有1000个项目,我不确定分派是否是一个好的解决方案(我需要先进行API调用才能首先获得项目,这就是为什么我要使用分派来填充redux)。

已通过reducer更新->

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 Router。如我所说,我的列表仅显示Redux State阵列中4个项目中的3个。如果我导航到其他页面,然后返回列表页面,则实际上会渲染所有4个项目。

2 个答案:

答案 0 :(得分:0)

我认为您的问题源于以下事实:您已经从SharepointItems中“分支”了props并将其设置为组件的本地this.state。除非您真的需要,否则我建议您不要这样做。只需使用this.propsDan Abramov (author of Redux) recommends this as a general principle too

通过将道具分叉到状态上,您可以创建关于SharepointItems状态的两个事实来源,即this.state.initialItemsthis.props.SharepointItems。然后,您有责任通过实现this.state使this.propscomponentDidUpdate保持同步(这就是为什么您看不到它更新的原因)。您只需使用从props流入的数据,就可以避免所有额外的工作。

无论何时更新connect存储,props函数都会用新的redux重新渲染组件。因此,在您的render方法中,仅引用this.props.SharepointItems而不是this.state.initialItems。然后,您应该会很好,也就是说,假设您已实现了reducer并正确存储了配置。

答案 1 :(得分:0)

我实际上是错误地解决了这个问题。我打算将其保留到最后,并找到解决方法,但是我以某种方式解决了该问题。

我正在将页面组件(具有redux状态道具)导入到页面(反应路由器)中。该页面尚未连接,因为尚未准备好。显然,在连接页面(保存列表的父组件)之后,一切正常,我可以看到所有4个项目(而不是在没有连接父项的情况下看到3个项目)。

我想知道这是否有意...