React父组件传API返回参数给子组件报undefined该如何解决？

问题根因 #

• 变量作用域错误：preset_description 是在axios的then回调函数内部声明的，只在回调的局部作用域内有效，组件return语句在作用域外部，根本访问不到这个变量，直接触发未定义报错。
• 异步逻辑认知错误：axios.get是异步请求，不会阻塞组件同步渲染流程，不等接口返回结果，组件就会执行return语句。你不想用state、effect的思路完全行不通，React组件要把异步返回的数据传递到视图，必须用state存储数据，否则接口返回后组件不会触发重渲染，子组件永远拿不到返回值。
• 代码顺序错误：return语句后的console.log是死代码，永远不会执行。

修正后代码 #

import axios from 'axios'
import { useParams } from 'react-router-dom'
import React, { useEffect, useState } from 'react'
import PromptForm from './PromptForm';

const API_SEARCH_BASE = 'http://0.0.0.0:5001/api2/preset_loader';

function PresetFetcher(props)  {
    const { preset_name } = useParams();
    const API_SEARCH_URL = API_SEARCH_BASE + '/' + preset_name;
    // 声明state存储接口返回的预设描述
    const [presetDesc, setPresetDesc] = useState('');
    // 声明loading状态避免子组件拿空值
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        axios.get(API_SEARCH_URL)
        .then(response => {
            const preset = response.data;
            const description = preset[0].preset_description;
            // 把返回值更新到state，触发组件重渲染
            setPresetDesc(description);
            setLoading(false);
        })
        .catch(err => {
            console.error('请求预设失败', err)
            setLoading(false);
        })
    // 空依赖保证只在组件挂载时发起一次请求
    }, [])

    console.log('props leaving Presetfetcher: ', props);
    // 加载中可以显示占位内容，避免子组件报错
    if (loading) return <div>加载中...</div>

    return (
      <div>
        <PromptForm preset_out = {presetDesc} />
      </div>
    )
}

export default PresetFetcher;

修改说明 #

1. 用useState存储接口返回的数据和加载状态，请求成功后更新state触发组件重渲染，子组件就能拿到正确的值
2. 用useEffect包裹异步请求，避免组件每次重渲染都重复发起接口请求
3. 增加加载状态判断，接口返回前显示占位内容，避免子组件接收到空值报错
4. 调整了代码执行顺序，删除了return后的无效代码

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