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;
});
}