Блог

Я пытаюсь выполнить запрос GET с помощью Axios, передавая определенные параметры следующим образом,

 const fetchData = async () => {
    const response = await axios
      .get(config.App_URL.getAllMock, {
        params: {
          customHostName: customerData,
          type: "mock",
        },
      })
      .catch((error) => {
        console.error(`Error in fetching the data ${error}`);
      });
    let list = [response.data.routeManager];
    setData(list);
    setLoading(true);
  };
  

customerData извлекается из другого объекта, переданного через contextAPI этому компоненту.

  const [options, setOptions] = useContext(CustomerContext);
  

И затем она отображается следующим образом,

 const hostNames = [];
  options.map((name, index) => {
    hostNames.push(name.customer.customHostName);
  });
  const customerData = hostNames[0];
  

Запрос выполнен с ошибкой, 404 поскольку customerData не передается в качестве параметра в полезную нагрузку.
Итак, когда я проверил, URL-адрес журнала выглядит следующим образом,

 htts://abc.com/v1/route/getAllRoutes?type=mock 404
  

Я попытался записать значение customerData тогда в этом случае я вижу ожидаемое значение, которое будет передано.
Есть идеи о том, как передать customHostName как параметр в полезную нагрузку?

Обновлены вопросы с компонентом, на который я ссылаюсь,

 
const MainContent = () => {
  const [options, setOptions] = useContext(CustomerContext);

  const hostNames = [];
  options.map((name, index) => {
    hostNames.push(name.customer.customHostName);
  });
  const customerData = hostNames[0];

  // Get all the mock
  const fetchData = async () => {
    const response = await axios
      .get(config.App_URL.getAllMock, {
        params: {
          customHostName: customerData,
          type: "mock",
        },
      })
      .catch((error) => {
        console.error(`Error in fetching the data ${error}`);
      });
    ....
    ....
    ....
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
     ....
     ....
     ....
    </div>
  );
};

export default MainContent;


  

Вы используете options переменную, полученную из контекста, и если эта переменная получена из асинхронной функции, вам необходимо прослушать изменения в этой переменной, добавив эту переменную в массив зависимостей useEffect.

Ваша версия не работала, потому что вы вызывали функцию fetchData только один раз (после первоначального рендеринга).

   const fetchData = (customerData) => {
    ...
  }  

   useEffect(() => {
      if(options) {
       const hostNames = [];
       options.map((name, index) => {
       hostNames.push(name.customer.customHostName);
       });
        const customerData = hostNames[0];

        fetchData(customerData);
      } 
     }, [options]);