我正在尝试创建一个具有收藏功能的应用程序。该功能实际上有效,但仅在第二次单击后才有效。
编辑其他信息:第一次单击时,应用程序尝试将信息发送到我的数据库,但信息不完整。它只是发送我的初始值。第二次单击时,它最终会附加其他所需值并保存到数据库中。
我对钩子还很陌生,所以请随意评论我的代码可以使用的任何改进。这是我的 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;
我尝试将一些功能分离到不同的组件中,使用类组件重新创建它,但无法弄清楚。
提前致谢!
繁星淼淼
相关分类