警告：道具类型失败：提供给ImageGallery的字符串类型无效的道具“ items [0]”（预期对象）

Question

我知道这看似微不足道，但我是新手，很明显我缺少一些东西。

我正在尝试创建一个看起来像JSON对象的数组，以传递给react-image-gallery。在这里NPM 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} />;
  }
}

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

这是我的代码：

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 >
  );

当我上传第一张图片时，fileState等于以下内容，并且出现失败的prop类型错误：

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

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

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

我在构造fileState的方式上做错了吗？如果是这样，我该如何解决？谢谢。

Answer 1

您应将一个对象传递给JSON.parse：

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

此外，您有错字，密钥应该为original。