如何设置对象值数组的状态并在单击时将计数切换为 1 或 2

Question

我想在单击时更新对象数组中值的状态，值将在 1 和 2 之间切换，一旦单击，如果现有值为 1，它将在单击时更新 2 ，如果 2 它将更新它 1。值必须仅针对单击的对象而不是所有对象更改。

import React, {useRef, useState} from 'react'
import {BsThreeDots, BsBookmark, BsBookmarkFill} from 'react-icons/bs'


export const TextQuoteCard = () => {
 
    const [textQuote, setTextQuote] = useState([
        {
            userId: '123',
            userName: 'sample',
            userImageUrl: 'https://qph.fs.quoracdn.net/main-thumb-ti-406-100-gtkoukgmmuzegaytlmtaybgrsoihzyii.jpeg',
            quoteId: 'TQ119',
            postDateTime: '28 June at 8:20',
            quoteAuthorId: '123',
            quoteAuthorName: 'john len',
            quoteCategory: 'Motivational',
            quoteType: 'textQuote',
            quoteText: 'If there’s no market, then it may not be the best thing to do. Entrepreneurship is about finding market opportunities, or creating opportunities. If there’s no market, then you need to grow one',
            quoteImageUrl: '',
            // 1 = yes, 2 = no
            bookmarkStatus: 1,
            likesCount: 3300,
            commentsCount: 123,
            overallShareCount: 1203,
            fbShareCount: 423,
            twtShareCount: 1232,
            waShareCount: 1023,
            viewCount: 1923,
            isSelected: null
        }
        ])
    const handleBookmark = i => {
        let bookmarkStatus = [...textQuote]
        let bookmark = bookmarkStatus[i].bookmarkStatus
        console.log('before update' , bookmark)
        if(bookmark === 1) {
            bookmark = 2
        } else if(bookmark === 2){
            bookmark = 1
        }
        setTextQuote(bookmarkStatus)
        console.log('after update', bookmark)

    }
    
    return(
        <div>
            {
                textQuote.map((quote, index) => (
                    <div className="QuoteCardPrimaryContainer" key={quote.quoteId}>
                        className="QuoteCardAuthorFollowButtonActionContainer">
                          <span className="QuoteCardAuthorFollowButtonActionSpan"
                             onClick={() => handleBookmark(index)}>
                                <span className={quote.bookmarkStatus === 1 ?
                                   'bookmarkButtonContainer activeBookmark':
                                     'bookmarkButtonContainer'}>
                                      {quote.bookmarkStatus === 1 ? <BsBookmarkFill/> : 
                                          <BsBookmark/>}
                                    </span>
                                  </span>
                      </div>

                ))
            }
        </div>
    )
}

Answer 1

首先在 bookmarkStatus 必须更新的索引处获取 object。然后使用 splice 方法，您可以用更新的对象替换。


const handleBookmark = i => {
  let quoteObj = {...textQuote[i]};
  let bookmark = quoteObj.bookmarkStatus;
  console.log('before update', bookmark);
  if (bookmark === 1) {
    quoteObj.bookmarkStatus = 2;
  } else if (bookmark === 2) {
    quoteObj.bookmarkStatus = 1;
  }
  textQuote.splice(i, 1, quoteObj)
  console.log(textQuote);
  setTextQuote([...textQuote]);
  console.log('after update', textQuote[i].bookmarkStatus);
};

希望对您有所帮助。

如何设置对象值数组的状态并在单击时将计数切换为 1 或 2

How to setState of array of Object value and toggle the count to either 1 or 2 on click

ecmascript-5

react-hooks