Question

当我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>
}

Answer 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。

Answer 2

按照@icepickle的建议使用JSON.parse( JSON.stringify( this.props.demandGraphSeriesDataReducer ) )代替slice

Redux reducer正在由我的React组件中的setState或.map（）重写

2 个答案: