Redux中mapStateToProps处理多Todo对象：如何区分并获取唯一索引

嘿，这个问题我之前也碰到过！首先得明确：用数组索引当唯一标识其实是个临时方案，更可靠的方式是给每个Todo对象添加一个独一无二的ID——因为数组的索引会随着元素的增删发生变化，很容易导致组件渲染异常或者状态更新错误。下面分两种情况给你讲具体的实现方式：

一、推荐方案：给每个Todo添加唯一ID #

1. 生成唯一ID #

在创建新Todo的时候，给它加上一个唯一标识。你可以用：

• 前端生成的UUID（比如用uuid库的v4()方法）
• 后端返回的ID（如果有后端协作的话）
• 简单的自增数字（适合小型项目）

举个例子，创建Todo的action可以写成这样：

// 假设用自增ID
let nextTodoId = 0;
export const addTodo = (title) => ({
  type: 'ADD_TODO',
  payload: {
    id: nextTodoId++,
    title,
    isDone: false
  }
});

你的state就会变成：

rows: [
  { id: 0, title: 'Todo 1', isDone: true },
  { id: 1, title: 'Todo 2', isDone: false },
  { id: 2, title: 'Todo 3', isDone: true }
]

2. 在组件中区分Todo #

在mapStateToProps里把整个rows数组传给组件，然后渲染的时候遍历数组，每个Todo组件接收对应的id作为唯一标识：

// TodoList组件
import { connect } from 'react-redux';
import Todo from './Todo';

const TodoList = ({ todos }) => (
  <div>
    {todos.map(todo => (
      <Todo key={todo.id} todo={todo} />
    ))}
  </div>
);

const mapStateToProps = (state) => ({
  todos: state.rows
});

export default connect(mapStateToProps)(TodoList);

这样每个Todo组件就可以通过props.todo.id来区分自己，不管数组怎么变，ID都是唯一的。

3. 在Redux reducer中更新指定Todo #

比如要标记某个Todo为已完成，就可以通过ID找到对应的项：

const todoReducer = (state = { rows: [] }, action) => {
  switch (action.type) {
    case 'TOGGLE_TODO':
      return {
        ...state,
        rows: state.rows.map(todo =>
          todo.id === action.payload.id
            ? { ...todo, isDone: !todo.isDone }
            : todo
        )
      };
    default:
      return state;
  }
};

二、临时方案：使用数组索引（不推荐但应急可用） #

如果暂时不想加ID，也可以用数组的索引作为临时标识，但要注意它的局限性：当数组中间的元素被删除时，后面元素的索引会改变，可能导致React组件的key失效，引发不必要的重渲染。

1. 在渲染时获取索引 #

在遍历数组的时候，map方法的第二个参数就是当前元素的索引，你可以把它传给Todo组件：

const TodoList = ({ todos }) => (
  <div>
    {todos.map((todo, index) => (
      <Todo key={index} todo={todo} index={index} />
    ))}
  </div>
);

2. 在Redux中通过索引更新Todo #

比如要切换某个Todo的完成状态：

case 'TOGGLE_TODO':
  return {
    ...state,
    rows: state.rows.map((todo, index) =>
      index === action.payload.index
        ? { ...todo, isDone: !todo.isDone }
        : todo
    )
  };

总结 #

优先给每个Todo添加唯一ID，这是最稳定的方案；索引只能作为临时过渡用，不推荐在生产环境长期使用。这样不管是组件渲染还是Redux状态更新，都能精准定位到对应的Todo对象啦！

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