Question

我无法从 Json 文件中获取随机图像

2022-12-09

173

reactjs json

因此，我创建了一个包含名人 ID 和图像的 Json 文件。现在，我想从 Json 文件中获取单个随机图像并显示它。

到目前为止，我尝试了此方法，但收到“未捕获类型错误：无法读取未定义的属性（读取‘图像’）。

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) 中的随机替换为 0，我会从 Json 文件中获取第一个图像元素，但我无法使用随机来做到这一点。

Answer 1

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

Answer 2

random 已经是一张图片了，这个 Math.floor(Math.random() * images.length) 部分生成一个随机索引。

我看不到你的 json 文件的结构，但我猜你必须将设置部分更改为

setImage(random.image);