OnClick功能需要两次点击才能更新状态 [英] onClick function requires two clicks to update state

问题描述

我正在尝试创建一个具有收藏功能的应用程序。 该功能实际工作，但仅在第二次单击之后。

编辑了解更多信息：第一次点击时，应用程序尝试将信息发送到我的数据库，但它是不完整的。它只发送我的初始值。在第二次单击时，它最后会追加其他所需的值并保存到数据库中。

我对钩子还很陌生，所以请随时对我的代码可以使用的任何改进发表意见。 这是我的Reaction组件，它处理所有事情。

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

这篇关于OnClick功能需要两次点击才能更新状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！