警告：道具類型失敗：提供給“ImageGallery”的“字符串”類型的無效道具“items [0]”，應為“對象”

Question

我知道這可能看起來微不足道，但我是一個新手，我顯然錯過了一些東西。

我正在嘗試創建一個似乎是 JSON 對象的數組以傳遞給 react-image-gallery。 見這里NPM react-image-gallery

根據該 web 頁面，我需要執行以下操作：

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 等於以下內容，並且我收到 Failed prop type 錯誤：

當我上傳第二張圖片時，fileState 看起來像：

當 fileState 中有 2 個圖像時，我沒有收到錯誤消息。

畫廊不顯示任何圖像。 我確實得到了箭頭和播放/暫停按鈕，但我沒有看到任何圖像。 但我不完全確定我是否根據上面提到的 npm 網頁正確導入了 image-gallery.css。 但如果這是一個問題，那么我將在這里發布另一個問題。

我在構建 fileState 的方式上做錯了嗎？ 如果是這樣，我該怎么做才能解決它？ 謝謝。

Answer 1

您應該將 object 傳遞給JSON.parse ：

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

另外，您有錯字，密鑰應該是original 。