javascript - Redux reducer 正在被我的 React 组件中的 setState 或 .map() 覆盖

Question

当我对 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。