如何在React中从URL数组批量展示图片？报错问题求助

你的代码存在几处关键错误导致渲染失败，逐一修正如下：

1. 初始状态设置错误 #

useState(0)将初始值设为数字，但我们需要存储图片URL数组，初始值应改为空数组[]。否则首次渲染时，imgs是数字类型，调用map方法会直接抛出错误。

2. JSX内变量声明语法违规 #

在JSX的{}代码块中不能直接写const imgArr = ...这类变量声明语句，需直接返回map的执行结果，或把变量定义在return语句外部。

3. map回调参数误用 #

map((img) => { return <img src={imgs} /> })里，src应使用当前迭代的单个URL参数img，而非整个imgs数组；同时React列表元素必须添加唯一key属性，这里可直接用图片URL作为key（接口返回的URL是唯一的）。

4. 提前渲染数组元素的风险 #

初始状态下imgs是空数组，直接写imgs[0]会得到undefined，导致图片加载报错，建议统一用map渲染所有图片，移除手动编写的<img src={imgs[0]}>这类代码。

修复后的完整代码 #

import React from "react";
import { useState, useEffect} from 'react';

export default function Gallery() {
  // 初始值改为空数组
  const [imgs, setImgs] = useState([]);
  const url = "http://shibe.online/api/shibes?count=100";

  const getImgs = async () => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      setImgs(data);
    } catch (e) {
      console.error(e);
    }
  };

  useEffect(() => {
    getImgs();
  }, []);

  return (
    <div>
      <h1>Gallery</h1>
      {/* 用map批量渲染图片，添加key和正确的src */}
      {imgs.map((imgUrl) => (
        <img key={imgUrl} src={imgUrl} alt="shiba" />
      ))}
    </div>
  );
}

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