Question

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

Answer 1

我将尝试使用您提供的示例（即登录并加载微调器）对此进行解释。非常适合使用像redux这样的状态管理库。它将负责为您处理数据。根据您的问题，我可以将其称为数据绑定。

请查看此内容以进一步了解：React Redux getting started

Answer 2

如果您使用的是功能组件，那么使用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

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

2 个答案: