當我更新它的值時改變道具-有解無憂

所以我環顧四周，但似乎沒有什么能解決我的問題。我有一些帶有喜歡的反應，但是顯示喜歡并添加喜歡的子組件只會在重繪后更新。我也嘗試了 useEffect 的東西，但似乎沒有用。

function updateLike(vacation, update) {
    if(update === 0) {
      vacation.likes--;
    } else if (update === 1) {
      vacation.likes  ;
    }
  }

這是我在 App.js 中的函式，當有人單擊“贊”按鈕時會觸發該函式。

import { faHeart, faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from 'react'

const vacationInfo = ({ vacation, setVacation, updateLike }) => {
    return (
        <div className="vacation">
            <div className="container">
                <div className="row">
                    <div className="vacation__banner">
                        <img src={vacation.images.image1} alt="" className="vacation__banner--img" />
                        <img src={vacation.images.image2} alt="" className="vacation__banner--img" />
                        <img src={vacation.images.image3} alt="" className="vacation__banner--img vacation__banner--last" />
                        <p onClick={() => setVacation(false)} className="close__button"><FontAwesomeIcon icon={faTimes} /></p>
                    </div>
                    <div className="vacation__pricetag">
                        {
                            vacation.price > 1000 ?
                            <div className="vacation__pricetag--expensive">
                                <p className="vacation__pricetag--para">EXPENSIVE</p>
                            </div>
                            : 
                            <div className="vacation__pricetag--cheap">
                                <p className="vacation__pricetag--para">CHEAP</p>
                            </div>
                        }
                    </div>
                    <div className="vacation__description">
                        <h2 className="vacation__description--title">{vacation.name}</h2>
                        <p className="vacation__description--capital">Capital: {vacation.capital}</p>

                        <p className="vacation__description--para">{vacation.description}</p>
                        <div className="vacation__description--likes">
                            HERE <p onClick={() => updateLike(vacation, 1)} className="likes__add"><FontAwesomeIcon icon={faHeart} />{vacation.likes}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default vacationInfo;

在這里您可以看到我有 ap 標簽，它在點擊時運行該功能并且一切正常，但它不會更新它背后的道具。

uj5u.com熱心網友回復：

您忘記使用setVacation.

還要小心突變

所以

function updateLike(vacation, update) {
    if(update === 0) {
      vacation.likes--;
    } else if (update === 1) {
      vacation.likes  ;
    }
  }

應該

function updateLike(vacation, update) {
  let newVacation = JSON.parse(JSON.stringify(vacation));
  if (update === 0) {
    newVacation.likes--;
  } else if (update === 1) {
    newVacation.likes  ;
  }
 
  setVacation(newVacation);
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493291.html

標籤：javascript 反应

上一篇：jQuery點擊事件然后創建多組div

下一篇：洗掉工具提示透明度