为何调用setState后我的React组件未重新渲染？

嘿，作为React新手碰到重渲染问题太正常啦！我帮你梳理下这段ToDoList代码里可能导致问题的几个关键点，以及对应的修复方案：

1. 用index作为列表项key的坑 #

你现在给<ToDo>组件用index当key，这是React里非常常见的误区。当列表项发生增删、排序变化时，React会因为key的重复/错误匹配，错误地复用组件实例，导致不必要的重渲染，甚至组件状态混乱。一定要用每个todoItem的唯一标识（比如id）作为key，示例如下：

{this.state.todoList.map((todoItem) => <ToDo key={todoItem.id} info={todoItem} /> )}

2. Props更新时State未同步 #

你的state.todoList是在constructor里用初始props初始化的，但当父组件传递的props.todoList更新时，当前组件的state不会自动更新——因为constructor只在组件挂载时执行一次。这会导致列表内容不刷新，看起来像是重渲染出了问题。

你需要监听props的变化，同步更新state里的排序后列表。现在推荐使用getDerivedStateFromProps这个生命周期钩子（替代已废弃的componentWillReceiveProps）：

static getDerivedStateFromProps(nextProps: Props, prevState: State) {
  // 当props的todoList发生变化时，重新排序并更新state
  if (nextProps.todoList !== prevState.todoList) {
    return { todoList: this.sortTodos(nextProps.todoList) };
  }
  return null; // 不需要更新state时返回null
}

3. 别再用componentWillMount啦 #

这个生命周期钩子已经被React官方废弃，它可能引发一些意外问题（比如在服务端渲染场景中重复执行）。如果是做初始化操作，直接放在constructor里即可；如果是异步操作（比如请求数据），放在componentDidMount里会更安全。

修改后的完整代码示例 #

class ToDoList extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { todoList: this.sortTodos(props.todoList) };
  }

  // 监听props变化，同步更新排序后的列表
  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
    if (nextProps.todoList !== prevState.todoList) {
      return { todoList: this.sortTodos(nextProps.todoList) };
    }
    return null;
  }

  render = () => {
    return (
      <List>
        {/* 用todoItem的唯一id作为key */}
        {this.state.todoList.map((todoItem) => <ToDo key={todoItem.id} info={todoItem} /> )}
      </List>
    );
  }

  // 示例排序方法，可根据你的需求调整逻辑
  sortTodos = (todos: TodoItem[]) => {
    return [...todos].sort((a, b) => {
      // 示例：未完成的待办项排在前面
      return a.completed ? 1 : -1;
    });
  }
}

另外，如果你搭配Redux使用，还要确保store里的todoList更新时，父组件能正确接收到更新后的props——比如用connect时，mapStateToProps要正确映射状态，避免因为引用相同数组导致props未触发更新。

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