Nextjs：UseEffect 渲染问题

Question

我试图在值更改时添加一个名为 image 的特定变量，并将其添加到数组状态以将其保存在那里，然后在 jsx 代码中我映射数组以显示这些值，但由于某种原因，我这样做时遇到问题。

第一件事是，当将值添加到数组，然后在站点中映射该值时，它会显示多次，另一个问题是，尽管我输入了先前的参数，但这些值并未被保存，即将到来的新值将取代之前的值。

这是代码：

  const searchParams = useSearchParams();
  const [image, setImage] = useState(searchParams.get("image") || null);


  useEffect(() => {
    if (image) {
      handleFileUpload(image);
    }
  }, [image]);

  const handleFileUpload = (imageUrl) => {
    if (!fileList.includes(imageUrl)) {
      setFiles((previous) => [...previous, imageUrl]);
    }
  };

  return (
 {fileList.map((imageUrl, index) => (
    <div key={index} className="bg-white rounded-lg h-60 w-36 hover:brightness-95 shadow-md">
     <div className="bg-gray-400 flex h-3/4 rounded-t-lg">
       <Image src={imageUrl} alt="Story" width={200} height={200} />
     </div>
    </div>
 ))}
)

这段代码有什么问题以及是什么导致了这个问题，我想也许我使用 useEffect 的方式是错误的。

Answer 1

1. 图像的多重渲染：出现此问题的原因可能是组件每次重新渲染时，都会将图像再次添加到

   files

   数组中，从而导致组件重新渲染，从而导致多次添加同一张图片。

2. 替换以前的值：新值替换

   files

   数组中的前一个值可能是因为您没有正确处理状态更新。

要解决这些问题，您可以对代码进行一些调整：

import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

function YourComponent() {
  const searchParams = useSearchParams();
  const [image, setImage] = useState(searchParams.get("image") || null);
  const [files, setFiles] = useState([]);

  useEffect(() => {
    if (image) {
      handleFileUpload(image);
    }
  }, [image]);

  const handleFileUpload = (imageUrl) => {
    if (!files.includes(imageUrl)) {
      setFiles(prevFiles => [...prevFiles, imageUrl]);
    }
  };

  return (
    <>
      {files.map((imageUrl, index) => (
        <div key={index} className="bg-white rounded-lg h-60 w-36 hover:brightness-95 shadow-md">
          <div className="bg-gray-400 flex h-3/4 rounded-t-lg">
            <img src={imageUrl} alt="Story" width={200} height={200} />
          </div>
        </div>
      ))}
    </>
  );
}

所做的更改：

1. 更正

   setFiles

   ：利用

   setFiles

   中的功能更新根据先前的状态正确更新状态。
2. 使用

   img

   标签：使用

   img

   标签代替

   Image

   组件（假设

   Image

   不是自定义组件）来显示图像。
3. 清理 JSX 格式：为了清晰起见，对 JSX 格式进行了细微调整。

这些调整应该有助于解决您面临的问题。