setState 钩子在使用 HTTP PUT 获取后未更新

Question

所以我正在尝试具有编辑和删除功能的基本待办事项应用程序。我的编辑功能有问题。我的应用程序中有两个主要组件，即用于添加待办事项的 InputTodo 和包含两个附加子组件的 ListTodo(每个待办事项的 TodoItem 和显示所选待办事项编辑器的 EditTodo(。每当单击某个 TodoItem 中的"编辑"按钮时，都会显示"编辑"组件。当单击EditTodo组件中的"确认"按钮时，将通过Node发送PUT请求以更新数据库(在本例中为PostgreSQL(。成功发送此发送请求后，我想重新呈现 TodoItem 组件列表。我是通过不同的 GET 请求从数据库中获取更新的值列表，然后在给定 GET 请求的响应的情况下调用 setState。但是，GET 请求的响应并不反映之前完成的 PUT 请求。因此，应用程序仍会呈现数据库中未更新的待办事项列表。

以下是一些代码片段

const ListTodo = (props) => {
const [todos, setTodos] = useState([]);
const [editorOpen, setEditorOpen] = useState(false);
const [selectedId, setSelectedId] = useState();
const getTodos = async () => {
console.log('getTodos() called');
try {
const response = await fetch("http://localhost:5000/todos");
const jsonData = await response.json();
setTodos(jsonData);
console.log(todos);
} catch (err) {
console.error(err.message);
}
console.log('getTodos() finished');
};
const editTodo = async description_string => {
console.log('editTodo() called');
try {
const body = { description: description_string };
const response = await fetch(
`http://localhost:5000/todos/${selectedId}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body)
}
);
console.log(response);
await getTodos();
props.handleListModified();
} catch (err) {
console.error(err.message);
}
console.log('editTodo() finised');
}
const handleItemButtonClick = (button, row_key) => {
if (button === 'delete') {
deleteTodo(row_key);
setEditorOpen(false);
} else if (button === 'edit') {
setEditorOpen(true);
setSelectedId(row_key);
console.log(todos.filter(todo => { return todo.todo_id === row_key})[0].description);
}
};
const handleEditorButtonClick = async (button, description_string) => {
if (button === 'cancel') {
setSelectedId(null);
} else if (button === 'confirm') {
await editTodo(description_string);
}
setEditorOpen(false);
};
useEffect(() => {
console.log('ListTodo useEffect() trigerred');
getTodos();
}, [props.listModified]);
return(
<Fragment>
<table>
<tbody>
{todos.map( todo => (
<TodoItem
key={todo.todo_id}
todo_id={todo.todo_id}
description={todo.description}
handleClick={handleItemButtonClick} />
))}
</tbody>
</table>
{ editorOpen &&
<EditTodo
handleEditorButtonClick={handleEditorButtonClick}
description={todos.filter(todo => { return todo.todo_id === selectedId})[0].description}
selectedId={selectedId} /> }
</Fragment>
);
};

Answer 1

我想问题是 - 在editTodo函数中，您正在调用getTodos()函数。但是，您不会使用收到的响应更新状态。看看这是否有帮助。

const response = await fetch(
`http://localhost:5000/todos/${selectedId}`,
{
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body)
}
);
console.log(response);
setTodo(await getTodos()); // Update the state with the values from fetch