我在这个 React Bootstrap Slider 上显示动态数据。有没有办法让代码更高效？

Question

这是我第一次 post 来这里。我正在构建一个 React Boostrap Carousel，它从数据库中提取电影数据并显示它。我是 React 和一般编程的新手。到目前为止，我使代码工作。但我不知道如何处理图像。图片存储在 React **src/assets/imgs 中。 **。我应该像 ../../assets/imgs/the-batman.jpg 这样在数据库中存储对图像的引用然后显示它吗？如果是这样，稍后在项目中管理员将必须创建一个 MovieOfTheMonth。他应该能够输入电影标题、描述等，还可以上传电影图像。有没有办法在上传图像时将其存储到特定文件夹，在本例中为 src/assets/imgs 并在数据库中创建引用？我这里不需要解决方案，只是告诉我它是否可以实现。最后有没有办法改进我的代码？

this is my full code for this component

import React, {useState, useEffect } from 'react';
import './Carousel.css'
import Carousel from 'react-bootstrap/Carousel';
import 'bootstrap/dist/css/bootstrap.min.css';

import axios from 'axios';


 const CarouselHero = () => {

    //boostrap code
    const [index, setIndex] = useState(0);
    const handleSelect = (selectedIndex, e) => {
      setIndex(selectedIndex);
    };

    //Get Movies of the month
    const [movie, setMovie] = useState([])
    const getMovie = () => {
      axios.get("http://localhost:4000/moviesOfTheMonth")
      .then((res) => {
          const myMovie = res.data
          myMovie.push()
          setMovie(myMovie);
      })
    }
    useEffect(() => getMovie(), []);
  return (
     <Carousel activeIndex={index} onSelect={handleSelect} fade> 
          {movie.map((item) => {
            const {id, title, description} = item.Movie
            return (
              <Carousel.Item  interval={2000}>
              <img
                src={require("../../assets/imgs/the-batman.jpg")}
                alt="First slide"
              />
            <Carousel.Caption >
              <h1>{title}</h1>
              <p>{description}</p>
              <button>Book Now</button>
            </Carousel.Caption>
          </Carousel.Item>
            )
          })}
    </Carousel> 
    
    
  );
};

export default CarouselHero;

Answer 1

我认为从技术上讲，遍历资产文件夹并为新图像创建数据库条目（创建和比较哈希？）是可以实现的，但通常不是您这样做的方式。我会将图像放在 S3 等文件存储中，并使用 id 引用它们。

我不知道你的项目中的管理员是谁，但如果管理员不是技术人员，你可以创建（当然也可以使用模板）一个小而简单的管理仪表板，其中 he/she 可以通过 UI.

维持一个月的电影

最后对您的代码做一些评论：

const handleSelect = (selectedIndex, e) => { setIndex(selectedIndex); }; - 如果你只需要第一个参数，而不需要第二个、第三个等参数，你可以将其省略：(selectedIndex) => ...
const [movie, setMovie] = useState([]) - 不要忘记在每个语句后使用分号。（它们是可选的，但有时对避免奇怪的错误很有用）。另外，你在这里有一个列表。所以也许称它为“电影”更好。
myMovie.push() - 你想在这里推送什么？
useEffect(() => getMovie(), []); - 通常你直接在useEffect中定义和调用async函数。你没有得到任何提示或警告吗？
movie.map((item) => { - 当您迭代并返回一个列表时，React 需要每个元素上的键（此处为 Carousel.Item）。不要只使用索引，因为这是一种不好的做法。始终尝试在您的数据中查找 id 属性。
const {id, title, description} = item.Movie - 为什么数据被 Movie 对象嵌套？就不能直接说 item.id、item.title、item.description 吗？

我在这个 React Bootstrap Slider 上显示动态数据。有没有办法让代码更高效？

I am displaying dynamic data on this React Boostrap Slider. Is there a way to make the code more efficient?

mysql

node.js

reactjs

react-bootstrap