React中useState异常：新增图片均被最后一张替换的问题

问题描述 #

开发React测试应用时，使用useState管理图片数组状态。通过表单获取图片名称与URL创建对象，调用setImages添加至数组后，所有新增图片均被最后添加的图片替换，仅硬编码的初始图片显示正常。

相关代码 #

AddImageButton 组件代码 #

import "./addImageButton.css"
import { ThemeContext } from "./mycontents"
import { useContext, useEffect, useRef } from "react";

let formInput = {
    id: Math.floor(Math.random() * 100000),
    like: true
}
export function AddImageButton({ addANewImages }) {
    console.log("Add image button")
    const themecontext = useContext(ThemeContext)
    console.log(themecontext)
    const addImageNameValue = useRef("null")
 
    useEffect(()=>{
        addImageNameValue.current.value = "Image Name"
        console.log("inside userref 1");
    })

    console.log("HI");
 
    function handleInputChange(e) {
        console.log(e.target.imageName);
        if (e.target.name === "imageName") {
            formInput["imageContent"] = e.target.value
        }

        if (e.target.name === "imageLink") {
            formInput["imageUrl"] = e.target.value
        }
    }
    function handleSubmit(e) {
        e.preventDefault()
        addANewImages(formInput)
    }

    return (
        <>
            <div style={{ marginTop: "5px" }}>
                <form>
                    <input placeholder="Enter Image Name"  name="imageName" ref={addImageNameValue} type="text" onChange={handleInputChange} autoFocus></input>
                    <input placeholder="Enter Image Link" name="imageLink" type="text" onChange={handleInputChange}></input>
                    <button type="submit" onClick={handleSubmit}>
                        Add New Image
                    </button>
                </form>
            </div>
        </>
    )
}

MyImageCard 组件代码 #

import { useState } from "react"
import "./index.css"
import { AddImageButton } from "./addImageButton"
import { DeleteImage } from "./deletedImageButton.js"
import { useContext } from "react"
import { ThemeContext } from "./mycontents"
import { MyCounter } from "./mycounter"
const initialImages = [
  {
    id: 0,
    imageUrl: "https://cdn.pixabay.com/photo/2023/05/23/23/58/moth-8013720_640.jpg",
    imageContent: "Butterfly",
    like: true
  },
  {
    id: 1,
    imageUrl: "https://cdn.pixabay.com/photo/2023/06/11/19/09/fruit-8056663_1280.jpg",
    imageContent: "Pineapple",
    like: true
  },
]

export function MyImageCard() {
  const [images, setImages] = useState(initialImages)

  function addANewImages(newImage){
    setImages(images=>[...images,newImage])
  }

  function deletingImageID(imageID) {
    const imagesAfterDelete = images.filter((value) => {
      return value.id !== Number(imageID) || imageID === null
    })
    setImages([...imagesAfterDelete]);
  }

  const themecontext = useContext(ThemeContext)

  return (
    <>
      {
        images.map((value) => {
          return (
            <div className="imageContainer">
              <img src={value.imageUrl} alt={value.imageContent}></img>
              <br />
              <span>{value.id}. {value.imageContent} {value.like ? "✨" : ""}</span>
            </div>
          )
        })
      }
      <ThemeContext.Provider value="Vivek">
        <AddImageButton addANewImages={addANewImages}></AddImageButton>
      </ThemeContext.Provider>
      <DeleteImage deletingImageID={deletingImageID}></DeleteImage>
      <MyCounter></MyCounter>
    </>
  )
}

问题截图 #

问题原因 #

formInput是声明在AddImageButton组件外部的全局变量，所有提交操作都是修改同一个对象的属性，再将这个对象的引用添加到数组中。由于数组内的新增项都指向同一个对象，修改对象属性时所有引用都会同步更新，导致所有新增图片显示最后一次修改的内容。同时，这个对象的id仅在组件首次加载时生成一次，新增图片的id会重复，还会引发React列表渲染的key问题。

解决方案 #

1. 每次提交生成新的图片对象 #

将formInput的创建逻辑移到handleSubmit函数内部，确保每次提交都生成独立的对象：

import "./addImageButton.css"
import { ThemeContext } from "./mycontents"
import { useContext, useEffect, useRef } from "react";

export function AddImageButton({ addANewImages }) {
    const themecontext = useContext(ThemeContext)
    const addImageNameValue = useRef("null")
    const imageLinkRef = useRef(null);

    useEffect(()=>{
        addImageNameValue.current.value = "Image Name"
    }, []) // 空依赖确保只执行一次

    function handleSubmit(e) {
        e.preventDefault()
        // 每次提交创建全新对象
        const formInput = {
            id: Math.floor(Math.random() * 100000),
            like: true,
            imageContent: addImageNameValue.current.value,
            imageUrl: imageLinkRef.current.value
        }
        addANewImages(formInput)
        // 清空输入框
        addImageNameValue.current.value = "Image Name"
        imageLinkRef.current.value = ""
    }

    return (
        <>
            <div style={{ marginTop: "5px" }}>
                <form onSubmit={handleSubmit}>
                    <input placeholder="Enter Image Name" name="imageName" ref={addImageNameValue} type="text" autoFocus></input>
                    <input placeholder="Enter Image Link" name="imageLink" ref={imageLinkRef} type="text"></input>
                    <button type="submit">Add New Image</button>
                </form>
            </div>
        </>
    )
}

2. 修复列表渲染的key问题 #

在MyImageCard的map渲染中添加唯一的key属性（使用图片对象的id），这是React列表渲染的强制规范：

{
  images.map((value) => {
    return (
      <div className="imageContainer" key={value.id}>
        <img src={value.imageUrl} alt={value.imageContent}></img>
        <br />
        <span>{value.id}. {value.imageContent} {value.like ? "✨" : ""}</span>
      </div>
    )
  })
}

额外优化建议 #

• 用useState管理输入值而非useRef，更符合React状态管理规范，便于后续表单验证等操作：

  const [imageName, setImageName] = useState("Image Name")
  const [imageUrl, setImageUrl] = useState("")
  
  function handleNameChange(e) {
    setImageName(e.target.value)
  }
  
  function handleUrlChange(e) {
    setImageUrl(e.target.value)
  }
  

• 用Date.now()或第三方库（如uuid）生成id，避免随机数重复的风险。

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