useState 指的是陈旧的值

Question

我有一个 keeper 应用程序，我在其中添加笔记并将它们存储在数据库中。当我向服务器发出 post 请求时，我试图从数据库中获取 _id，这最终将帮助我稍后删除注释（如果需要）。 这是我的 jsx 文件

function CreateMessage(props) {   

    const [currentGuest, setCurrentGuest] = useState({
        guestName: '',
        guestMessage: '',
        id:''
    });

    function handleMessages(event) {
        const {name, value} = event.target;
        setCurrentGuest(prevGuest => {
            return {
                ...prevGuest,
                [name] : value
            };
        });
    }


    function submitMessage(event) {
    //props.onAdd(currentGuest);
    const params = {
      guestName: currentGuest.guestName,
      guestMessage: currentGuest.guestMessage,
    }
    axios
    .post("http://localhost:8000/notes", params)
    .then(res => {
      console.log("The response is"+res.data._id);
      console.log(res.status);
      setCurrentGuest(prevGuest => {
        console.log(res.data._id)
            return {
                ...prevGuest,
                id: res.data._id
            };
        });
        console.log(currentGuest);
    })

    event.preventDefault();
    }

    return (
    <div>
      <form>
        <input
          name="guestName"
          placeholder="Guest Name"
          value={currentGuest.guestName}
          onChange={handleMessages}
        />
        <textarea
          name="guestMessage"
          placeholder="Write a Message"
          rows="3"
          value={currentGuest.guestMessage}
          onChange={handleMessages}
        />
        <button onClick={submitMessage}>Add</button>
      </form>
    </div>
  );

}

id 被正确地获取并显示在 ```console.log("The response is"+res.data._id") 中。但是在第一次提交时，总是空的并且陈旧的 id 被附加到 currentGuest下次提交对象

Answer 1

function submitMessage(event) {
//props.onAdd(currentGuest);
const params = {
  guestName: currentGuest.guestName,
  guestMessage: currentGuest.guestMessage,
}
axios
.post("http://localhost:8000/notes", params)
.then(res => {
  console.log("The response is"+res.data._id);
  console.log(res.status);
  setCurrentGuest(prevGuest => {
    console.log(res.data._id)
        return {
            ...prevGuest,
            id: res.data._id
        };
    });
    console.log(currentGuest);
})

event.preventDefault();
}

在上面的 sn-p 中，在获得响应后，您正确地更改了状态，但问题在于您检查更改状态的位置（console.log(currentGuest)）。您基本上是在状态更改之前进行记录。

您可以使用useEffect 挂钩并记录其中的状态。每次currentGuest 更改时都会运行。

useEffect(() => {
 console.log(currentGuest)
}, [currentGuest])

更新

你可以在useEffect钩子里面使用修改后的currentGuest：

useEffect(() => {
  console.log(currentGuest)
  if(currentGuest.id) {
   props.onAdd(currentGuest);
   // You can also reset the state here as follows
   setCurrentGuest({
    guestName: '',
    guestMessage: '',
    id:''
   });
  }
}, [currentGuest]) // You might need to add the necessary dependencies to this array.