如何将 JavaScript 中 API 调用的值返回到 React 组件答案

【问题标题】：How to return value from an API call in javascript to a React component如何将 JavaScript 中 API 调用的值返回到 React 组件
【发布时间】：2021-12-13 14:50:18
【问题描述】：

我似乎无法在 javascript 中将此 API 调用的值返回给我的反应组件。我有一个调用 API 的 java 脚本文件。在js文件中，返回结果但是当我在我的react组件中调用useEffect中的js函数时，它返回undefined。

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 => res.json())
        .then((result) => {
            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) => {
            isLoaded(true)
            error(err)
        })
}

这是我的矩形组件

导出默认函数 OrdersChart() {

const [payload, setPayload]  = useState([])
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);

useEffect(() => {
    setPayload = ordersData()
    console.log(payload)
}, [])

........

变量payload为空

【问题讨论】：

API 调用是异步的。要获得价值，您应该在 Promise 上使用 .then。所以它将是ordersData().then(payload => console.log(payload))。您还应该从 ordersData 函数返回 fetch。

标签： javascript reactjs api fetch

【解决方案1】：

您需要使用 React 钩子进行 API 调用并存储数据。您可以使用useEffect hooks 调用API 并使用useState 存储状态中的数据。

const { useState } = React;

function useFetchData() {
  const [loading, setLoading] = React.useState([]);
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    setLoading(true);
    fetch("https://randomuser.me/api/?results=10")
      .then((response) => response.json())
      .then((responseJson) => {
        setData(responseJson.results);
        setLoading(false);
      })
      .catch((error) => {
        console.error(error);
        setLoading(false);
      });
  }, []);

  return { loading, data };
}

function App() {
  const { loading, data } = useFetchData();
   
  if(loading){
   return <p>Loading... </p>
  }

  return (
    <div>
      {data.map((item) => (
        <div>{item.name.first}</div>
      ))}
    </div>
  );

}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

【解决方案2】：

我找到的最干净的方法是这样

把父组件改成这个

useEffect(() => {
   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)
    }
}

现在您在父组件中有响应，并且可以从那里设置状态。

【讨论】：

【解决方案3】：

你不会在这个函数中返回任何东西。您只需将有效负载值推送到数据中，即局部变量。您可以通过 setState 使用状态和设置值。

【讨论】：