React Redux添加新状态值时覆盖原有状态问题求助

看起来你遇到的问题大概率和列表渲染的key使用或者表单状态重置有关，你的reducer写法其实是正确的（用展开运算符创建新数组添加元素，没有修改原状态），咱们一步步排查：

1. 首先确认核心问题：是Store里的数组被覆盖，还是渲染时看起来被覆盖？ #

先在你的reducer里加几个日志，确认每次添加时数组的变化：

case 'ADD_WORKOUT': {
  console.log('当前workouts长度:', state.workouts.length);
  console.log('要添加的新workout:', action.payload.workout);
  const newWorkouts = [...state.workouts, action.payload.workout];
  console.log('添加后的workouts长度:', newWorkouts.length);
  return {
    ...state,
    workouts: newWorkouts,
  };
}

如果日志显示每次添加后长度都+1，但页面上只显示最后两个，那就是渲染时的key问题；如果长度没有增长，再去排查Store配置。

2. 最可能的原因：用index作为列表项的key #

你的Dashboard组件里用数组index作为key：

{props.workouts.map((workout, i) => {
  return (
    <div>
      <p key={i}>{workout.name}</p>
    </div>
  );
})}

React依赖key来区分列表项，用index的话，当数组新增元素时，React会复用之前的DOM节点，导致看起来像是旧元素被覆盖（实际Store里的数组是正确的）。

解决办法：给每个Workout添加唯一ID

• 修改action.js，给新添加的workout生成唯一ID：

  export const addWorkout = workout => ({
    type: 'ADD_WORKOUT',
    payload: {
      workout: {
        ...workout,
        id: Date.now() // 用时间戳生成临时唯一ID，生产环境可以用uuid库
      },
    },
  });
  

• 给初始状态里的workout也加上ID：

  const initialState = {
    workouts: [
      {
        id: 1,
        name: 'HIIT',
        calories: '320',
        duration: '30',
      },
      {
        id: 2,
        name: 'Run',
        calories: '35',
        duration: '400',
      },
    ],
    totalCal: 0,
  };
  

• 修改Dashboard的列表渲染，用id作为key：

  {props.workouts.map((workout) => {
    return (
      <div key={workout.id}>
        <p>{workout.name}</p>
      </div>
    );
  })}
  

3. 辅助优化：提交表单后重置表单状态 #

虽然这不是直接导致覆盖的原因，但可以避免表单残留旧值带来的混淆。修改使用Form组件的父组件，添加表单重置逻辑：

import Form from './Form';
import { connect } from 'react-redux';
import { addWorkout } from './actions';
import { reset } from 'redux-form';

const WorkoutForm = (props) => {
  const handleSubmit = (values) => {
    props.addWorkout(values);
    props.reset('workout'); // 重置名为"workout"的表单
  }
  return <Form onSubmit={handleSubmit} />
}

export default connect(null, { addWorkout, reset })(WorkoutForm);

4. 最后排查Store配置 #

如果上面的步骤都没解决问题，检查你的根reducer是否正确合并了workoutReducer：

import { combineReducers } from 'redux';
import workoutReducer from './workouts';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  workouts: workoutReducer,
  form: formReducer, // 必须保留redux-form的reducer
});

export default rootReducer;

确保没有重复定义同名的reducer，导致状态被覆盖。

内容的提问来源于stack exchange，提问作者Steven