React Hooks useState 数组渲染两次答案

【问题标题】：React Hooks useState array rendering two timesReact Hooks useState 数组渲染两次
【发布时间】：2020-06-15 18:39:20
【问题描述】：

我需要使用函数将图像上传到我的 useState，然后我想渲染这些图像问题是我不知道如何渲染返回的数组这里是代码代码：

  const [logoImg, logoUpdater] = useState();
  const [title, updateTitle] = useState();
  const [carouselImages, carouselImagesUpdater] = useState([]);
  useEffect(
    (e) => {
      if (carouselImages.length > 0) {
      }
    },
    [carouselImages]
  );

  const carouselUploader = (file) => {
    var addedFile = file.target.files[0];
    carouselImagesUpdater((carouselImages) => [...carouselImages, addedFile]);
  };
  const titleFunction = () => {
    Preview(title);
  };
  return (
    <div>

      <div>
        <p>Upload Carousel images</p>
        <input
          type="file"
          accept="image/*"
          multiple
          onChange={(e) => carouselUploader(e)}
        ></input>
        {carouselImages.map((img) => (
          <img src={img} key="s"></img>
        ))}

【问题讨论】：

您的应用程序是否包含在 React.StrictMode 中？这会导致组件在开发模式下多次渲染。
@HMR 不，不是，我不知道什么是 React.StrictMode
它是最近的 create-react-app 项目的标准配置，在 vscode 中你可以使用 control + shift + f 搜索它会在所有项目文件中查找，你应该搜索 StrictMode 来制作当然。
@HMR 原来是这个问题，现在解决了，但是.map函数没有渲染上传的图片你知道怎么做吗？

标签： javascript arrays reactjs react-hooks

【解决方案1】：

多次重新渲染不会显示您所选文件的损坏图像。以下是如何设置文件的示例：

const App = () => {
  const [
    carouselImages,
    carouselImagesUpdater,
  ] = React.useState([]);
  const carouselUploader = (e) => {
    const reader = new FileReader();
    reader.addEventListener('load', (event) => {
      carouselImagesUpdater((carouselImages) => [
        ...carouselImages,
        event.target.result,
      ]);
    });
    reader.readAsDataURL(e.target.files[0]);
  };
  return (
    <div>
      <p>Upload Carousel images</p>
      <input
        type="file"
        accept="image/*"
        multiple
        onChange={(e) => carouselUploader(e)}
      ></input>
      {carouselImages.map((img, index) => (
        <img key={index} src={img}></img>
      ))}
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

Here 是一些关于如何读取文件的文档。

【讨论】：