React组件中无法修改images数组state的favourite值求助

问题根源 #

1. setImages的回调参数prev是完整的images数组，而非单个元素，所以prev.id永远是undefined，无法定位到要修改的项。
2. 原代码的数组拼接逻辑会新增元素而非修改原有元素，逻辑错误。
3. 未根据favourite状态切换心形图标，点击后无视觉反馈。

修复后的完整代码 #

import React, { useState, useEffect } from 'react'
import { AiOutlineHeart, AiFillHeart } from "react-icons/ai"

const Image = () => {
  const API_URL = `https://dog.ceo/api/breed/hound/images/random/12`

  const [images, setImages] = useState([])
  const [error, setError] = useState(null)
  const [isLoading, setIsLoading] = useState(true)

  const handleFavouriteDogs = (id) => {
    setImages((prevImages) => {
      // 遍历数组，找到对应id的项并修改favourite状态
      return prevImages.map(item => 
        item.id === id ? { ...item, favourite: true } : item
      )
    })
    // 注意：setState是异步操作，此处console.log(images)只会输出旧值，如需查看新值可通过useEffect监听images变化
  }

  useEffect(() => {
    const fetchRandomData = async () => {
      try {
        const res = await fetch(API_URL)
        if (!res.ok) throw Error("Please reload the page")
        const data = await res.json()
        const dataArr = data.message.map((item, i) => ({
          id: i,
          image: item,
          favourite: false
        }))
        setImages(dataArr)
        setError(null)
      } catch (err) {
        setError(err.message)
      } finally {
        setIsLoading(false)
      }
    }
    fetchRandomData()
  }, [])

  const imagesList = images.map((item) => (
    <div key={item.id} className="image_card">
      <div className='image_holder'>
        <img className="image" src={item.image} alt="dog-img" />
      </div>
      {/* 根据favourite状态切换实心/空心心形图标 */}
      {item.favourite ? 
        <AiFillHeart className='image_icon' onClick={() => handleFavouriteDogs(item.id)} /> :
        <AiOutlineHeart className='image_icon' onClick={() => handleFavouriteDogs(item.id)} />
      }
    </div>
  ))

  return (
    <div className='image_container'>
      {!isLoading ? (!error ? imagesList : error) : "Loading page..."}
    </div>
  )
}

export default Image

关键修改说明 #

• 在handleFavouriteDogs中，用map遍历prevImages数组，找到id匹配的项，通过展开运算符...item保留原有属性，仅修改favourite为true，其他项保持不变。
• 根据item.favourite的值切换AiFillHeart和AiOutlineHeart图标，点击后能直观看到状态变化。
• 移除了无用的favouriteDogs状态（原代码未使用）。

内容的提问来源于stack exchange，提问作者Awizp