调用YouTube API时出现TypeError: users.map is not a function报错如何解决

核心错误原因 #

• YouTube Data API v3的search接口返回值为对象格式，而非预期的数组：返回对象的items字段才是存储视频列表的数组，直接将整个返回对象赋值给初始为数组的users状态后，users从数组变成了对象，调用对象的map方法自然会触发类型错误。
• 现有代码里的渲染字段（avatar_url、login等）是GitHub用户接口的返回字段，和YouTube接口返回的字段结构完全不匹配，即使解决了map报错后续也会出现属性读取错误。

修复后的完整代码 #

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

const UseEffectAPI=()=>{
  const [users,setUsers]=useState([]);
  const getUsers=async()=>{
    try {
      const response=await fetch('https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCd4bDhA66nR3d78wef255Pg&key=AIzaSyB5iWURFaBb-j4abPBG91bfXbAYDDT2oHM');
      const resData = await response.json();
      // 核心修改：仅取返回对象里的视频列表数组赋值给状态
      setUsers(resData.items || []);
    } catch (err) {
      console.log('接口请求失败', err)
    }
  }

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

  return (
    <>
      <div>
        <h2>YouTube频道视频列表</h2>
        <div className="container-fluid mt-5">
          <div className="row text-center">
            {/* 加可选链避免空值报错 */}
            {
              users?.map((curELem)=>{
                return(
                  <div key={curELem.id.videoId || curELem.id}>
                    <div className="col-10 col-md-4 mt-5" >
                      <div className="card p-2">
                        <div className="d-flex align-items-center">
                          {/* 替换为YouTube返回的视频封面字段 */}
                          <div className="image"> <img src={curELem.snippet.thumbnails.default.url} className="rounded" width="155" alt={curELem.snippet.title} /> </div>
                          <div className="ml-3 w-100">
                            {/* 替换为YouTube返回的视频标题字段 */}
                            <h4 className="mb-0 mt-0 textLeft">{curELem.snippet.title}</h4>
                            <div className="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats">
                              <div className="d-flex flex-column">
                                {/* 替换为YouTube返回的视频ID字段 */}
                                <span className="articles">{curELem.id.videoId}</span> <span className="number1">38</span> </div>
                                  <div className="d-flex flex-column">
                                <span className="followers">Followers</span> <span className="number2">980</span> </div>
                              <div className="d-flex flex-column">
                                  <span className="rating">Rating</span> <span className="number3">8.9</span> </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              )
            })
          }
          </div>
        </div>
      </div>
    </>
  );
}
export default UseEffectAPI;

额外注意点 #

• 调用公开API建议加上try/catch捕获请求错误，避免接口报错导致页面崩溃
• 列表渲染必须加key属性，否则React会触发性能警告
• 生产环境不要把API密钥直接写在前端代码里，会有密钥泄露被滥用的风险

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