如何用React Hooks遍历Axios获取的TV Maze API数据并传递给子组件

问题修复方案 #

1. 核心错误原因

• 之前直接取request.data[0]只能拿到单条数据，且部分剧集返回的image字段为null，直接访问medium属性就会抛出cannot read medium of null错误
• 提交表单时把inputValue从对象改成了字符串，导致后续表单输入监听逻辑出错
• 单张图片渲染的组件逻辑不支持批量展示多张图片

2. 分步修改代码

App.js 修改

import React, {useState, useEffect} from 'react';
import Nav from "./Nav";
import UseForm from "./Form"
import FetchApiData from './ApiData'
import axios from 'axios';

function App(){
    // 存储用户表单输入
    const [inputValue, setInputValue] = useState({
        search: "",
        contactName:"",
        contact:""
    });
    // 存储提交后的搜索关键词，避免修改原inputValue结构
    const [searchKeyword, setSearchKeyword] = useState("")
    // 存储所有匹配的剧集图片链接
    const [imageList, setImageList] = useState([])

    // 表单提交逻辑
    function onFormSubmit(event){
        event.preventDefault();
        setSearchKeyword(inputValue.search)
    }

    // 拉取API数据逻辑
    useEffect(()=>{
        // 搜索关键词为空时不发起请求
        if(!searchKeyword.trim()) return
        async function fetchData(){
            try{
                const request =  await axios.get(`https://api.tvmaze.com/search/shows?q=${searchKeyword}`) 
                // 遍历所有结果，过滤掉image为null的项，收集所有medium图片链接
                const images = request.data
                    .filter(item => item.show.image)
                    .map(item => item.show.image.medium)
                setImageList(images)  
            } 
            catch(err){
                console.log("请求出错：", err)
            }
        }  
        fetchData()
    }, [searchKeyword])

    return (
    <div>
        <Nav 
        src={`${process.env.PUBLIC_URL}/images/logo.png`}
        title = "CONTACT US"
        />
        <UseForm inputValue={inputValue} setInputValue={setInputValue}
            onFormSubmit = {onFormSubmit}
        />
        <FetchApiData imageList={imageList}/>
    </div>)
}

export default App

ApiData.js 修改

import React from 'react';

const FetchApiData = ({imageList}) =>{
    // 没有匹配结果时显示提示
    if(imageList.length === 0) return <div className="no-result">暂无匹配的剧集图片</div>
    return (
        <div className="image-container">
            {
                imageList.map((imgUrl, index) => (
                    <div className="section-image" key={index}>
                        {/* 加onError处理图片加载失败的情况，避免页面报错 */}
                        <img 
                            src={imgUrl} 
                            alt="剧集封面"
                            onError={(e) => e.target.style.display = 'none'}
                        />
                    </div>
                ))
            }
        </div>
    ) 
}

export default FetchApiData

Form.js 无需修改，保持原有逻辑即可

3. 图片加载报错说明

控制台看到的图片加载错误是TV Maze的图片资源的跨域配置限制，和请求逻辑无关，上述代码中加的onError处理可以直接隐藏加载失败的图片，不影响页面正常渲染。

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