Arrays 警告：失败的属性类型：为“ImageGallery”提供的类型为“string”的属性“items[0]”无效，应为“object”`

我知道这可能看起来很琐碎，但我是一个新手，我显然错过了一些东西

我试图创建一个似乎是JSON对象的数组，以传递给react image gallery。看这里

根据该网页，我需要做如下操作：

const images = [
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
];
 
class MyGallery extends React.Component {
  render() {
    return <ImageGallery items={images} />;
  }
}

const图像=[
{
原件：'https://picsum.photos/id/1018/1000/600/',
缩略图：'https://picsum.photos/id/1018/250/150/',
},
{
原件：'https://picsum.photos/id/1015/1000/600/',
缩略图：'https://picsum.photos/id/1015/250/150/',
},
{
原件：'https://picsum.photos/id/1019/1000/600/',
缩略图：'https://picsum.photos/id/1019/250/150/',
},
];
类MyGallery扩展了React.Component{
render（）{
返回；
}
}

但是，请注意，我没有使用缩略图，所以我只需要原始的

这是我的密码：

import React, { Fragment, useState } from 'react';
import axios from 'axios';
import ImageGallery from 'react-image-gallery';
//import '../image-gallery.css'
import "react-image-gallery/styles/css/image-gallery.css";

const AddNewItem = () => {
  var [fileState, setFile] = useState([]);

  var fileObj = {};

//bunch of irrelevant code

 //Image Preview
  const onChange = e => {

    //setFile(e.target.files[0]);
    fileObj = e.target.files[0];

    console.log("AddNewItem fileObj: ", fileObj)

    setFile(fileState => [...fileState, JSON.parse(`"orignal: ${URL.createObjectURL(fileObj)}"`)]);
}

//bunch of irrelevant code

  return (
    < Fragment >
      {console.log("AddNewItem onChange fileState: ", fileState)}

      <form id="myForm" onSubmit={onSubmit}>
        <div className="container">
          <div className="row ">
            <div className="col">              
             
              <label className="mt-3 mb-0">Image:</label><br />
              <input type="file" id="image" name="image" onChange={onChange}></input><br />
              <button type="submit" className="mt-3">Submit</button>

            </div>
           
            <div className="col">
              {fileState.length > 0 ? <ImageGallery items={fileState} showThumbnails={false} /> : ""}
            </div>
          </div>
        </div>
      </form>

    </Fragment >
  );

从“React”导入React，{Fragment，useState}；
从“axios”导入axios；
从“react image gallery”导入ImageGallery；
//导入“../image gallery.css”
导入“react image gallery/styles/css/image gallery.css”；
const AddNewItem=（）=>{
var[fileState，setFile]=useState（[]）；
var fileObj={}；
//一堆不相关的代码
//图像预览
const onChange=e=>{
//setFile（e.target.files[0]）；
fileObj=e.target.files[0]；
log（“AddNewItem fileObj:，fileObj”）
setFile（fileState=>[…fileState，JSON.parse（`orignal:${URL.createObjectURL（fileObj）}'））；
}
//一堆不相关的代码
返回(

{console.log（“AddNewItem onChange fileState:，fileState）}
图像：



提交
{fileState.length>0？：“”
);

当我上传第一个图像时，fileState等于以下值，并且我得到失败的prop type错误：

当我上传第二个图像时，fileState看起来像：

当fileState中有两个图像时，我没有得到错误

画廊没有显示任何图像。我确实看到了箭头和“播放/暂停”按钮，但我没有看到任何图像。但我不完全确定我是否根据上述npm网页正确导入了image-gallery.css。但如果这是一个问题，那么我将在此处发布另一个问题

---

我构建文件状态的方式是否有问题？如果有，我可以做些什么来修复它？谢谢。

您应该将一个对象传递给

JSON。parse

：

JSON.parse(`{"original": "${URL.createObjectURL(fileObj)}"}`)

---

另外，您有一个输入错误，密钥应该是

original

谢谢。我尝试了您的建议。我现在收到一个错误“VM233:1 Uncaught SyntaxError:JSON中位于JSON.parse（）位置13的意外标记b”。我想它是blob的b。如果我在原始值周围添加单引号，如JSON.parse（

{“original”：${URL.createObjectURL（fileObj）}}

），我得到开头的单引号是意外的标记。如果你使用双引号呢？非常感谢。你帮我解决了我的问题。看起来CSS也是对的。