Возникли проблемы с отображением изображения с помощью react-simple-file-upload

#reactjs #image #heroku #state

#reactjs #изображение #heroku #состояние

Вопрос:

Я пытаюсь создать небольшую галерею загруженных изображений, используя метод простой загрузки файлов Heroku. Мне удалось загрузить и сохранить изображения в базу данных, однако мне трудно создать галерею с изображениями. В идеале я хотел бы загрузить фотографию и сохранить ее на странице. Вот мой код.

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

const API_KEY = '...'


export default function About() {

  const [file, setFile] = useState()

  displayImage = (file) => {

    return file.map((file, index) => (
      <div key={index} className="file-display">
        <h3>{file}</h3>
      </div>
    ))
  };
  
  return (
    <div className='App'>
      <h1>upload an image</h1>
      <SimpleFileUpload apiKey={API_KEY} onSuccess={setFile} />
      {file amp;amp; <p> Uploaded: {file}</p>}
      <div className="gallery-">
        {this.displayImage(this.state.file)}
      </div>
    </div>
  )
}

Я пытаюсь использовать состояние для галереи с помощью функции displayImage, но я продолжаю получать эту ошибку.

  Line 12:3:  'displayImage' is not defined  no-undef

Спасибо за любую помощь.

1. Если вы объявляете переменную ( displayImage ), вы должны указать ключевое слово for example const . Или в вашем фрагменте что-то отсутствует?

2. @KiraLT Привет, в сниппете ничего не пропущено. Я довольно новичок в этом и следую руководству для приложения blogpost. Я добавил const и теперь получаю: ошибка типа: не удается прочитать свойство ‘displayImage’ неопределенного

Ответ №1:

В вашем коде есть несколько проблем:

При объявлении новой переменной необходимо использовать const let var ключевое слово or:

 const displayImage = (file) => {}

Вы не можете использовать (в вашем случае) this ключевое слово в функции:

Заменить this.displayImage на displayImage . И this.state.file просто file .

По умолчанию useState значение не определено. Итак, в вашем случае вы должны проверить, определено ли file значение:

 {file amp;amp; <div className="gallery-">
        {displayImage(file)}
</div>}

Название класса gallery- — вы, вероятно, что-то здесь пропустили.

1. Спасибо вам за это. Я очень ценю это. Почему «это» не требуется в данном сценарии? Это сбивало меня с толку, когда его использовать. когда не следует

2. this требуется только для переменных класса. В вашем случае у вас даже нет класса, просто обычная функция.