如何在React/Next.js中实现图片上传预览并解决列表不渲染问题

问题核心原因 #

你直接修改了原state数组的内容再调用set方法，React对state做浅比较时会认为数组引用没有变化，不会触发组件重新渲染，所以map遍历的内容始终不显示，同时还有几处语法/用法错误也会导致显示异常。

具体要修正的点 #

1. state更新逻辑调整：不要直接修改原state数组，每次更新都创建新的数组副本
2. 标签语法修正：React内DOM属性写className而非class，原生图片标签是<img>不是<image>，如果你要使用导入的Next.jsImage组件，需要额外配置宽高或fill属性
3. 标签存储逻辑优化：当前所有图片共用同一个tag状态，无法实现给每个图片分配独立标签，建议把两个数组合并为一个对象数组，每个元素存储对应图片的文件、预览地址、标签三个属性

修正后可运行的代码 #

import { useState, useEffect } from "react";
import Head from 'next/head'
import Layout, { siteTitle } from '../../components/layout'
import Image from 'next/image'

export default function PrivatePage(props) {
  // 合并为一个state，每个元素存{ file, previewUrl, tag }
  const [imageList, setImageList] = useState([])

  const uploadImageToClient = (event) => {
    if (event.target.files && event.target.files[0]) {
      const newFile = event.target.files[0]
      const newItem = {
        file: newFile,
        previewUrl: URL.createObjectURL(newFile),
        tag: ""
      }
      // 创建新数组更新state，触发重渲染
      setImageList(prev => [...prev, newItem])
    }
  };

  const updateImageTag = (index, value) => {
    // 更新指定位置的图片标签
    setImageList(prev => {
      const newList = [...prev]
      newList[index].tag = value
      return newList
    })
  };

  const uploadToServer = async (event) => {
    const body = new FormData()
    imageList.forEach((item, index) => {
      body.append(`file${index}`, item.file);
      body.append(`tag${index}`, item.tag)
    });
    const response = await fetch("/api/file", {
      method: "POST",
      body
    });
  };

  // 清理预览地址防止内存泄漏
  useEffect(() => {
    return () => {
      imageList.forEach(item => URL.revokeObjectURL(item.previewUrl))
    }
  }, [imageList])

  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>

      <div className="container">
        <div className="row">
          <h4>Select Images</h4>
          <div className="col">
            <input type="file" className="btn btn-outline-success-inverse"  onChange={uploadImageToClient} />
            <input type="file" className="btn btn-outline-success-inverse" onChange={uploadImageToClient} />
          </div>
          <div className="col"></div>
          <button
            className="btn btn-outline-success-inverse"
            type="submit"
            onClick={uploadToServer}
          >
            Send to server
          </button>
          {imageList.map((item, index) => {
            return (
              <div key={index} className="row ">
                <lead>{item.file.name}</lead>
                <input 
                  type="text" 
                  value={item.tag}
                  onChange={(e) => updateImageTag(index, e.target.value)} 
                />
                {/* 用原生img的写法 */}
                <img src={item.previewUrl} alt={item.file.name} width={200} />
                {/* 用Next.js Image的写法示例，按需选用
                <Image 
                  src={item.previewUrl} 
                  alt={item.file.name} 
                  width={200} 
                  height={200} 
                  style={{objectFit: 'cover'}}
                /> */}
              </div>
            )
          })}
        </div>
      </div> 
    </Layout>
  );
}

额外说明 #

修正state更新逻辑后，选择图片就会触发组件重渲染，map遍历的预览和标签输入框就能正常显示了，新增的useEffect会在组件卸载时自动释放createObjectURL创建的内存，避免内存泄漏。

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