javascript 如何呈现react组件一旦axios请求完成，我能够获取数据，但它显示了两次null，然后显示数据

qlfbtfca 于 2023-03-28 发布在 Java

关注(0)|答案(2)|浏览(84)

import "./App.css";
import axios from "axios";
import { useEffect, useState } from "react";

export default function Events() {
  const \[data, setdata\] = useState(null);
  useEffect(() =\> {
    axios.get("https://app.ticketmaster.com/discovery/v2/events?apikey=AZAG8m4u5gq5HgkyYk0sdE9eAG32vGPT&locale=*")
    .then((res) =\> {
      setdata(res.data);
    })
    .catch((error) =\> {
      console.log("Error encountered", error);
    });
  });
//   console.log(data);
  return (
    \<div className="App"\>
    {/* {data.\_embedded.events.map((e) =\> {
      <li>\[{e}\] {e.name}</li>;
    })} \*/}
    <h1>In Homepage</h1>
    \
  );
}

在显示实际数据之前，我得到了两次null：

我尝试从API获取数据并使用AXIOS显示它，但在AXIOS请求完成之前，其余代码只执行一次。

JavaScript

来源：https://stackoverflow.com/questions/75839122/how-can-i-render-the-react-component-once-the-axios-request-is-completed-i-am-a

2条答案

按热度按时间

qxgroojn1#

你需要在useEffect（）中使用空数组。

useEffect(()=>{
//axios request
},[]);

请访问https://react.dev/reference/react/useEffect#specifying-reactive-dependencies了解更多详情

赞(0）回复(0）举报 2023-03-28

czq61nw12#

首先，需要向useEffect添加一个空数组，使其只运行一次。
当事件可用时，可以使用&&操作符来呈现事件，如下所示：

useEffect(()=>{
  // your axios code
}, []);  // <- add the empty array here

return (
  <div className="App">
    {data && data._embedded.events.map((e) => (
      <li key={e.id}>{e.name}</li>
    )}
  </div>
);

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 如何呈现react组件一旦axios请求完成，我能够获取数据，但它显示了两次null，然后显示数据

2条答案

相关问题

热门标签

最新问答