当我console.log this.state.orginalSeries
,this.props.demandGraphSeriesDataReducer
和newSeries
时,我会得到所有相同的变异数据。
我尝试使用.map()和.slice()来使原始的reducer数据不发生突变,但是有些仍然在发生变化。我还可以看到使用Redux Devtools也在改变reducer的状态。
class DemandSubDemand extends Component {
constructor(props) {
super(props);
this.state = {
orginalSeries: null
};
}
componentDidMount(){
const copy = this.props.demandGraphSeriesDataReducer.slice()
this.setState({
orginalSeries: copy
})
}
componentDidUpdate(prevProps, prevState) {
if (this.props.demandGraphSeriesDataReducer!== prevProps.demandGraphSeriesDataReducer) {
const copy = this.props.demandGraphSeriesDataReducer.slice()
this.setState({
orginalSeries: copy
})
}
}
onValueUpdate(i, value) {
const newSeries = this.state.orginalSeries.map((line, j) => {
if(i === j) line.data[i] = line.data[i] + value;
return line;
});
}
render(){
return <button onClick={()=>this.onValueUpdate(0,100)}> here</button>
}
答案 0 :(得分:1)
我认为突变可能在这里:
onValueUpdate(i, value) {
const newSeries = this.state.orginalSeries.map((line, j) => {
if(i === j) line.data[i] = line.data[i] + value;
return line;
});
}
尤其是,line.data[i] =
将使原始数组中现有的line
对象发生突变。您需要make copies of every level of nesting in the data才能使其保持不变。
我强烈建议您使用configureStore()
function from Redux Starter Kit,它默认会添加一个变异检查器。另外,考虑使用Immer进行更简单的不可变更新。 Redux入门套件的createReducer()
and createSlice()
functions默认在内部使用Immer。
答案 1 :(得分:0)
按照@icepickle的建议使用JSON.parse( JSON.stringify( this.props.demandGraphSeriesDataReducer ) )
代替slice