reactjs-如何从父组件获取axios响应数据到子组件答案

【问题标题】：reactjs-how to get axios response data from parant component to a child componentreactjs-如何从父组件获取axios响应数据到子组件
【发布时间】：2020-12-27 15:11:48
【问题描述】：

我已经定义了一个组件，用于从服务器请求数据并通过 axios 获取结果，我想将该组件用于我的整个应用程序以发送请求，我将向该组件传递一个 api 链接和正文并从中获得响应，我必须将结果传递给我的子组件！想象一下使用点击登录按钮，子组件将用户名和密码发送到父组件（axios 组件）并从中获取响应数据我想在获取数据时显示微调器，这对我很重要！谢谢大家！

【问题讨论】：

也请分享代码。
轻量级解决方案是使用 React Context API。提供者组件包装了应用程序树，任何需要访问的组件都可以订阅（使用）上下文。许多全局应用状态解决方案都是基于上下文 API 构建的。

标签： reactjs axios

【解决方案1】：

如果您使用的是功能组件，那么这是使用hooks的好地方可以是这样的：

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

export const useRequest = () => {

  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(true);
  const [data, setData] = useState(null);

  const yourAxiosRequest = () => {
    //implementation of your axios request
  }

  const requestHandler = async (url, data) => {
    setIsLoading(true);
  
    try {
      await const response = yourAxiosRequest({
        url,
        data,
        method: 'POST',
      });
      setData(response.data);
    } catch (e) {
      setIsError(true);
    } finally {
      setIsLoading(false);
    }
  }

  return {
    isError,
    isLoading,
    data,
    requestHandler
  };
};

然后在你的组件中你可以像这样使用它

import React from 'react';
import { useRequest } from 'common/useRequest';

//your component code

const { isLoading, isError, data, requestHandler } = useRequest();
const clickHandler = (data) => requestHandler(url, data);

//your component code

【讨论】：

我像这样向父级发送请求，第一次单击时没有任何结果，但是当再次单击时，我得到了结果，我无法检查加载状态以显示微调器，因为它是false 直到我再次单击 import React, { Component } from 'react';从 '../../HttpRequest/ReqToServer' 导入 {MyRequest} 导出默认函数 Welcome(){ const { isLoading, isError, data, requestHandler } = MyRequest(); const clickHandler = (data) => requestHandler('localhost/ankavita/user/1/detail'); return ( ) }

【解决方案2】：

我将尝试使用您给出的示例来解释这一点，即登录和加载微调器。使用像 redux 这样的状态管理库是您的理想选择。它将负责为您处理数据。根据我从您的问题中可以得出的结论，它称为数据绑定。

请查看此内容以获取更多信息：React Redux getting started

【讨论】：