从JSON文件获取随机图片时遭遇TypeError错误求助

你代码里的核心错误是random变量的定义逻辑错了：

• 你写的let random = images[Math.floor(Math.random() * images.length)];是直接从数组里取出了一个对象，不是数组的索引值。
• 之后在handleNext里用images[random]，相当于拿对象当索引去访问数组，结果肯定是undefined，自然会报“无法读取undefined的image属性”的错误。

把random改成存索引值，同时补上漏写的useState导入，还可以优化初始值加载逻辑：

import { useState } from 'react';
import images from "../Index.json"

function Celeb() {
  // 初始化时直接加载一张随机图片
  const [image, setImage] = useState(() => {
    const randomIdx = Math.floor(Math.random() * images.length);
    return images[randomIdx].image;
  });

  const handleNext = () => {
    // 每次点击都生成新的随机索引
    const randomIdx = Math.floor(Math.random() * images.length);
    setImage(images[randomIdx].image);
  }

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

export default Celeb;

• 原代码漏了导入useState，这是必须补上的，否则会报错。
• 初始化时直接生成随机图片，避免页面刚加载时img标签没有src的空白状态。
• 每次点击按钮都重新生成随机索引，保证每次点击都能拿到新的随机图片，而不是复用组件首次渲染时的旧索引。

内容的提问来源于stack exchange，提问作者Brinda5