Question

我对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项（最后添加的第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个项目。

Answer 1

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

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

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

Answer 2

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

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

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

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

2 个答案: