onClick 函数需要两次单击才能更新状态

Question

我正在尝试创建一个具有收藏功能的应用程序。该功能实际上有效，但仅在第二次单击后才有效。编辑其他信息：第一次单击时，应用程序尝试将信息发送到我的数据库，但信息不完整。它只是发送我的初始值。第二次单击时，它最终会附加其他所需值并保存到数据库中。我对钩子还很陌生，所以请随意评论我的代码可以使用的任何改进。这是我的 React 组件，它负责处理所有事情。import React, { useState, useEffect } from 'react';import { Button } from 'react-bootstrap';const ItemInfo = (props) => {  const [item, setItem] = useState([]);  const [ favorite, setFavorite ] = useState({favoritable_type: 'Item', favoritor_type: 'User' })  useEffect(() => {    fetch(`/items/${props.match.params.id}`)    .then((response)=>{      if(response.status === 200){          return(response.json())        }      })      .then((item) => {        setItem(item);      })  }, []);  const createFavorite = (data) => {    fetch(`/favorites`, {      body: JSON.stringify(data),      headers: {        'Content-Type': 'application/json',        'X-CSRF-TOKEN': props.token      },      method: 'POST'    })    .then((resp) => {      if (resp.ok) {        setFavorite({})        alert('This items has been favorited!')      }    })    .catch((err) => {      if (err) {        console.log(err)      }    })  }  const handleFavorite = () => {    const value = { favoritor_id: props.current_user.id, favoritable_id: item.id }    setFavorite(favorite => ({...favorite, value}));    createFavorite(favorite)  }如果我完全诚实的话，我不太确定这是在做什么。我遇到了一个有类似内容的答案，它似乎解决了控制台中的问题，但没有解决实际的 POST 尝试。  useEffect(()=> {    console.log(favorite)  },[favorite])这一切似乎运作良好。  if (item === null) {    return <div>Loading...</div>  }   return (    <React.Fragment>    <Button onClick={ handleFavorite } >Favorite</Button>      <h1>{item.title}</h1>      <p>{item.body}</p>      <p>{item.user_id}</p>    </React.Fragment>  );};export default ItemInfo;我尝试将一些功能分离到不同的组件中，使用类组件重新创建它，但无法弄清楚。提前致谢！

Answer 1

由于钩子值是常量，因此它们不会立即随 setHookName 更改，而是在下一次渲染时更改。您可以通过将代码注入 setHookName 函数来解决这个问题，如下所示：

const handleFavorite = () => {

  setFavorite(oldFavorite => {

    const value = { favoritor_id: props.current_user.id, favoritable_id: item.id };

    const newFavorite = {...oldFavorite, ...value};

    createFavorite(newFavorite);

    return newFavorite;

  });

}