Блог

Кажется, я не могу вернуть значение этого вызова API в javascript своему компоненту react. У меня есть файл java — скрипта, который вызывает API. В файле js возвращаются результаты, но когда я вызываю функцию js в useEffect в своем компоненте react, она возвращает неопределенное значение.

 export function ordersData() {   const partner_code = localStorage.getItem('partner_code')   let items = []  let data = []  let isLoaded = false  let error = ''   fetch('xxxxxxxxxxxx'   process.env.REACT_API)  .then(res =gt; res.json())  .then((result) =gt; {  for (let instance in result['docs']) {  let payload = (result['docs'][instance])   payload.id = instance   payload.timestamp = shortMonthYear(payload.timestamp)   data.push(payload)  }   items = data.reverse()   }, (err) =gt; {  isLoaded(true)  error(err)  }) }  

Вот мой прямой кишечный компонент

экспорт функции по умолчанию OrdersChart() {

 const [payload, setPayload] = useState([]) const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [items, setItems] = useState([]);  useEffect(() =gt; {  setPayload = ordersData()  console.log(payload) }, [])  

……..

Переменная полезная нагрузка пуста

Вам нужно использовать крючки реакции для вызовов API и хранить данные. Вы можете использовать useEffect крючки для вызова API и использовать useState их для хранения данных в состоянии.

 const { useState } = React;  function useFetchData() {  const [loading, setLoading] = React.useState([]);  const [data, setData] = React.useState([]);   React.useEffect(() =gt; {  setLoading(true);  fetch("https://randomuser.me/api/?results=10")  .then((response) =gt; response.json())  .then((responseJson) =gt; {  setData(responseJson.results);  setLoading(false);  })  .catch((error) =gt; {  console.error(error);  setLoading(false);  });  }, []);   return { loading, data }; }  function App() {  const { loading, data } = useFetchData();    if(loading){  return lt;pgt;Loading... lt;/pgt;  }   return (  lt;divgt;  {data.map((item) =gt; (  lt;divgt;{item.name.first}lt;/divgt;  ))}  lt;/divgt;  );  }  ReactDOM.render(  lt;App /gt;,  document.getElementById('root') ); 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"gt;lt;/scriptgt; lt;div id="root"gt;lt;/divgt; 

Самым чистым способом, который я нашел, было это

Измените родительский компонент на этот

 useEffect(() =gt; {  newFunctionName(); }, [])  async function newFunctionName(){  const response = await ordersData();  console.log(response)  // you can then set all your states directly in here }  

Измените компонент вызова api на этот.

 export default async function ordersData() {  try{  const res = await fetch('xxxxxxxxxxxx'   process.env.REACT_API)  return res  } catch(err){  console.log(err)  return(err)  } }  

Теперь у вас есть ответ в родительском компоненте, и вы можете устанавливать состояния оттуда.

Вы ничего не возвращаете в этой функции. Вы просто вводите значение полезной нагрузки в данные, это локальная переменная. Вы можете использовать состояние и установить значение с помощью setState.