如何在Next.js子组件中使用父组件函数内的response数据？

你的核心问题是**response变量仅存在于axios请求的then回调作用域内**，父组件渲染时无法直接访问它。要解决这个问题，需要用React的useState钩子把请求结果存为组件状态，再通过props传递给子组件。

修改步骤： #

1. 引入useState钩子，初始化状态存储请求返回的数据
2. 在axios请求成功的回调中更新这个状态
3. 将状态作为data props传递给子组件component1

修改后的完整代码： #

import { useState } from 'react';
import axios from 'axios';

function func1(props) {
    // 初始化状态存储请求结果，初始值设为null
    const [responseData, setResponseData] = useState(null);
    // 可选：存储错误状态，方便子组件处理错误提示
    const [requestError, setRequestError] = useState(null);

    function handleSubmit(e) {
        e.preventDefault();
        var formData = new FormData(e.target);
        const form_values = Object.fromEntries(formData);
        
        axios.get(`here is my url`,{
            params : form_values,
            headers: {
                'Content-Type': 'text/html',
                // 注意：Access-Control-*是后端需要设置的响应头，前端请求里添加无效，可删除
                // 'Access-Control-Allow-Origin': '*',
                // 'Access-Control-Allow-Methods':'GET',
              },
        }).then(function (response) {
            console.log(response.data);
            // 更新状态，触发组件重新渲染
            setResponseData(response.data);
            // 请求成功时清空错误状态
            setRequestError(null);
        })
        .catch(function (error) {
            console.error(error);
            setRequestError(error);
            // 请求失败时清空数据状态
            setResponseData(null);
        });
    }

    return ( 
        // 将状态传递给子组件
        <component1 data={responseData} error={requestError} />
    )
}

export default func1;

额外说明： #

• 子组件component1可以通过props.data获取请求结果，通过props.error处理错误场景。
• 若要优化用户体验，可新增isLoading状态：请求发起时设为true，请求完成（成功/失败）后设为false，用于展示加载提示。

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