[英]onClick function requires two clicks to update state
我正在嘗試創建一個具有收藏功能的應用程序。 該功能實際上有效,但只有在第二次點擊之后。
編輯其他信息:在第一次點擊時,應用程序嘗試將信息發送到我的數據庫,但它不完整。 它只發送我的初始值。 在第二次單擊時,它最終會附加其他所需的值並保存到數據庫中。
我對鈎子很陌生,所以請隨時評論我的代碼可以使用的任何改進。 這是我處理一切的 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;
我嘗試將某些功能分離到不同的組件中,使用類組件重新創建它,但一直無法弄清楚。
提前致謝!
由於鈎子值是常量,它們不會隨 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;
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.