我有一个Table组件,该组件呈现项目列表的行:

return <Row style={styles.row} key={idx} item={item} onSelect={this.props.onRowSelect}>
    {columns.map((col, idx) => {
        return <Column style={col.style} key={`${item._id}_${col.key}`}
                       width={col.width || this._defaultCellWidth} type={col.type}>
            {_.get(item, col.key)}
        </Column>
    })}
    </Row>


每个项目都有selected:bool值,该值绑定到每一行的复选框。

另外,我还有一个HeaderRow,其中具有用于全部选中的复选框。
通过选中复选框,我调度了一个事件来更新所选字段。
状态本身已更新,但是没有重新渲染。
我的动作是:

if(action.id)
{
    let index = state.items.findIndex(item => item._id == action.id);
    state.items[index].selected = action.selected;
}
else
{
    state.items.map(e=>e.selected = action.selected);
}

return
{
    ...state,
    items: state.items
}


编辑:
那是一个好的解决方案:

if(action.id) {
            let index = state.items.findIndex(item => item._id == action.id);
            state.items[index].selected = action.selected;
            return {
                ...state
            }

        }else{
            return {
                ...state,
                items: state.items.map((item, index) => {
                    return Object.assign({}, item, {
                        selected: action.selected
                    })
                })
            }
        }

最佳答案

记住all data in the Redux store must be considered immutable"[a reducer] must never mutate its arguments")。

您正在变异state.items中的项目,并且由于items仍然是同一对象,因此Redux认为它不变,因此视图不会更新。

09-17 17:59
查看更多