gpt4 book ai didi

javascript - onClick 函数需要两次点击才能更新状态

转载 作者:行者123 更新时间:2023-12-04 08:35:03 25 4
gpt4 key购买 nike

我正在尝试创建一个具有偏爱功能的应用程序。
该功能实际上有效,但仅在第二次单击后才有效。
编辑以获取更多信息:第一次单击时,应用程序尝试将信息发送到我的数据库,但它不完整。它只是发送我的初始值。在第二次单击时,它最终会附加额外的必需值并保存到数据库中。
我对钩子(Hook)很陌生,所以请随时评论我的代码可以使用的任何改进。
这是我处理所有事情的 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;
我尝试将一些功能分成不同的组件,使用类组件重新创建它,但无法弄清楚。
提前致谢!

最佳答案

由于钩子(Hook)值是常量,它们不会随着 setHookName 立即改变,它们会在下一次渲染时改变。您可以通过将代码注入(inject) 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;
});
}

关于javascript - onClick 函数需要两次点击才能更新状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64840853/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com