onClick 函数需要两次单击才能更新状态

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


编辑其他信息:第一次单击时,应用程序尝试将信息发送到我的数据库,但信息不完整。它只是发送我的初始值。第二次单击时,它最终会附加其他所需值并保存到数据库中。


我对钩子还很陌生,所以请随意评论我的代码可以使用的任何改进。这是我的 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;

我尝试将一些功能分离到不同的组件中,使用类组件重新创建它,但无法弄清楚。


提前致谢!


慕婉清6462132
浏览 123回答 1
1回答

繁星淼淼

由于钩子值是常量,因此它们不会立即随 setHookName 更改,而是在下一次渲染时更改。您可以通过将代码注入 setHookName 函数来解决这个问题,如下所示:const handleFavorite = () => {&nbsp; setFavorite(oldFavorite => {&nbsp; &nbsp; const value = { favoritor_id: props.current_user.id, favoritable_id: item.id };&nbsp; &nbsp; const newFavorite = {...oldFavorite, ...value};&nbsp; &nbsp; createFavorite(newFavorite);&nbsp; &nbsp; return newFavorite;&nbsp; });}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript