时间戳

首页 > 解决方案 > 尝试在 React 中迭代 URL 数组？

reactjs - 尝试在 React 中迭代 URL 数组？

问题描述

我正在尝试使用 Heroku 的新 add:on 'simple-file-upload' 创建一个图片库。我已设法将所有内容保存到数据库中，并且一次可以显示 1 张图像，但现在无法创建图库。我已经按照我的想法设置了所有内容，但是当我console.log(files)没有收到 URL 时，而只是收到1计数中的数字。有什么想法我在这里做错了吗？下面是我的代码：

import React from "react";
import SimpleFileUpload, { SimpleFileUploadProvider } from "../components/SimpleFileUpload"
import { useState } from 'react'
import "./styles.css"

const API_KEY = ''

let count = 0;

export default function About() {
  const [files, setFiles] = useState([]);
  console.log(files)
  //var Gallery = [];
  //Gallery.push(files);
  //console.log(files)

  return (
    <div className="App">
      <h1>upload an image</h1>
      <SimpleFileUpload apiKey={API_KEY} onSuccess={() => setFiles([...files, `${++count}`])} />
      {!!files &&
        files.map(a => {
          return (
            <div
              key={a}
              style={{
                display: "flex",
                justifyContent: "space-between",
                marginTop: 5
              }}
            >
              <div>{a}</div>
              {/*
                 button to remove entries from the array, this should also make an API call to remove them from your server (unless the files are required for something like an audit).
                */}
              <button onClick={() => setFiles(files.filter(f => f !== a))}>
                Remove
              </button>
            </div>
          );
        })} 
        
        
      
    </div>
  );
}

标签： reactjsimageheroku

解决方案

看起来您的onSuccess处理程序不接受文件。...files${++count}中的() => setFiles([...files, ${++count}])是filesfrom const [files, setFiles] = useState([]);, ie, [], 给你留下${++count}, ie, 1。

将其更改为files => setFiles([...files ${++count}])应该可以解决它——尽管我不知道是什么onSuccess，所以我不能肯定地说。

推荐阅读