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

Question

When I console.log the this.state.orginalSeries , this.props.demandGraphSeriesDataReducer and newSeries I get all of the same mutated data back.

I tried using .map() and .slice() to not mutate the original reducer data but some how it still is getting mutated. I can also see using Redux Devtools it is mutating the state of the reducer as well.

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

I think the mutation may be here:

  onValueUpdate(i, value) {
    const newSeries = this.state.orginalSeries.map((line, j) => {
      if(i === j) line.data[i] = line.data[i] + value;
      return line;
    });
  }

In particular, line.data[i] = is going to mutate the existing line object in the original array. You would need to make copies of every level of nesting in the data for it to not mutate.

I'd strongly encourage you to use the configureStore() function from Redux Starter Kit , which adds a mutation checker by default. Also, consider using Immer for simpler immutable updates. Redux Starter Kit's createReducer() and createSlice() functions use Immer internally by default.

Answer 2

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