用于模式更新的useState set方法

Question

我正在尝试建立一个简单的待办事项清单。基本上有一个项目列表。当用户单击项目上的“编辑”按钮时，selectedTodoItem被更新。然后显示一个使用selectedTodoItem作为道具的模态。 我还将ant.design library用于列表。 这是我的代码（忽略了无关的位）：

const [selectedTodoItem, setSelectedTodoItem] = useState(selectedTodoList.items[0]);

const editItemHandler = (item) => {
    setSelectedTodoItem(item);
    dispatch(toggleEditTodoItemModalVisible());
}

return(
    <List
    className="whitebg listItems"
    datasource={selectedTodoList.items}
    renderItem={(item) => (
        <TodoItemInList item={item} editHandler={editItemHandler} />
    )}
    />
    <TodoItemEditModal item={selectedTodoItem} />
);

<TodoItemInList>基本上是一个标签和一些按钮，其中之一称为editHandler(item)。 这是一个屏幕截图，因此您可以有个更好的主意：

问题是，当我加载页面并单击项目（例如“ Foundation”）上的“ edit”（蓝色，不介意删除图标）时，编辑模式会正常加载。但是，当我单击另一个蓝色按钮时，模式仍显示“ Foundation”。无论我单击哪个按钮，模态仅显示第一个单击的项目。根据console.log（），selectedTodoItem似乎正在更新，但是模态的prop不会随之更新。

任何朝着正确方向前进的人都会受到赞赏。