reactjs 从Json文件获取随机图像时遇到问题

w8biq8rn 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(106)

所以我已经创建了一个Json文件，里面有名人的ID和图片。现在我想从这个Json文件中得到一个随机的图片并显示出来。
到目前为止，我已经尝试过了，但是我得到了一个“未捕获的TypeError：无法读取undefined的属性（阅读'image'）。

import images from "../Index.json"

function Celeb() {
  const [image, setImage] = useState();
  let random = images[Math.floor(Math.random() * images.length)];

    const handleNext = () => {
      console.log(images[1].image);
      setImage(images[random].image);
    }
    

  return (
    <div className='celeb'>
      <div className='celeb_buttons'>
        <button className='play_button' onClick={handleNext}>Next</button>
   
      </div>
      <div className='pic'>
        <img src={image} />
      </div>
     </div>

例如，如果我将setImage（images[random].image）中的random替换为0，我将从Json文件中获取第一个图像元素，但我无法使用random执行此操作。

reactjs

来源：https://stackoverflow.com/questions/74742042/i-have-a-problem-with-getting-a-random-image-from-my-json-file

2条答案

按热度按时间

hgc7kmma1#

random是一个图像，但您稍后尝试将其用作数字。

import images from "../Index.json"

function Celeb() {
  const [image, setImage] = useState();

  const handleNext = () => {
    // Generate a random index in the images array
    let random = Math.floor(Math.random() * images.length);

    // Use the random index to access the correct object in the images array
    // and set the image state to the value of the image property
    setImage(images[random].image);
  }

  return (
    <div className='celeb'>
      <div className='celeb_buttons'>
        <button className='play_button' onClick={handleNext}>Next</button>
   
      </div>
      <div className='pic'>
        <img src={image} />
      </div>
     </div>
  )
}

赞(0）回复(0）举报 2022-12-12

zazmityj2#

random已经是图像。此Math.floor(Math.random() * images.length)部分生成随机索引。
我没有看到json文件的结构，但我猜您必须将设置部分更改为