Question

我对React＆amp; Redux，我正在与React rerender机制挣扎。

我正在尝试编写一个简单的ToDo应用程序。这是我的ToDoList课程：

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

    render = () => {
        return (
            <List>
                {this.state.todoList.map((todoItem, index) => 
                    <ToDo key={index} info={todoItem} />
                )}
            </List>
        );
    }

    componentWillMount = () => {
        if (this.state.todoList.length === 0)
            this.props.loadToDoList();
    }

    componentWillReceiveProps = (nextProps: Props) => {
        this.setState({ todoList: this.sortTodos(nextProps.todoList) });
    }

    sortTodos = (todos: ToDoModel[]) => {
        return todos.sort((a, b) => a.completed === b.completed ? 0 : a.completed ? 1 : -1)
    }
}

当我检查待办事项时，我的ToDoModel已更新，并且componentWillReceiveProps被调用。

我尝试计算已完成的待办事项的数量，并将此数字设置为componentWillReceiveProps中的状态。但是，由于某些原因，我的待办事项列表不会在更新的顺序中重新呈现，即使函数末尾有this.forceUpdate()也是如此。（实际上，在重新加载屏幕之前，我的待办事项未经过检查和重新订购。）

我错过了什么？

Answer 1

可能是因为key项中的Todo。尝试将键设置为项目的ID

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

Answer 2

内部地图尝试返回组件：

{this.state.todoList.map((todoItem, index) => 
  return <ToDo key={index} info={todoItem} />;
)}

为什么我的React组件在setState之后没有重新渲染？

2 个答案: