我有一个像这样的表
当您使用此 onChange 编辑数量时
onChange={this.handleInputChange.bind(null, cellInfo)}
我运行下面的代码
handleInputChange = (cellInfo, event) => {
let data = { ...this.props.Data };
data[cellInfo.index][cellInfo.column.id] = parseInt(event.target.value);
this.props.APISummaryData(data);
};
目标是首先获取存储中的数据,然后反射(reflect)您更改的值,然后使用操作 this.props.APISummaryData(data);
和 this.props.APISummaryData 更新它({ ...data });
都给出相同的状态突变错误。
这是 reducer
case types.API_SUMMARY_DATA:
return {
...state,
Summary: {
...state.Summary,
Data: action.Summary
}
};
如果我在 DevTools 中手动调度 Redux 中的操作
{
type: 'API_SUMMARY_DATA',
Summary: [
{
cusip: '019I',
quantity: 55,
}
]
}
这就是 Action
export const APISummaryData = Summary => ({ type: types.API_SUMMARY_DATA, Summary });
我没有收到任何错误并且数据已更新。我很困惑在这个方案中我在哪里改变了状态?
注意:我可能没有分享一些重要的代码,请在这里查看,所以请让我知道,我会分享它。
最佳答案
我假设您使用的是 Redux Starter Kit 中的 configureStore()
,它默认设置一个突变检查中间件。好的!这意味着突变检查器正在正确地完成其工作。
这里的这些行正在发生变化:
let data = { ...this.props.Data };
data[cellInfo.index][cellInfo.column.id] = parseInt(event.target.value);
这是因为 {...}
对象扩展运算符执行浅复制,而不是深层复制。 This is a very common mistake 。
我个人建议调度一个如下所示的操作:
{类型:“API_SUMMARY_DATA”,负载:{index,columnId,inputValue}}
然后使用reducer来完成所有更新。
此外,如果您使用 Redux Starter Kit,you can use our createReducer()
function to write "mutative" code in the reducer that actually does immutable updates 。
关于javascript - 分派(dispatch)操作时 Redux 状态发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56874008/