Reactjs 无尽的axios请求

我已经让它正常工作，在React中读取和显示firebase数据库中的数据

然而，它无休止地请求数据并消耗ram和网络

我哪里出错了？我已经在这里检查了其他问题和答案，但无法解决

function Requests() {


    const [RequestList, setRequests] = useState("");

    axios.get('firebasedatabase.json')
        .then(response => {
            const fetchedRequests = [];
            for (let key in response.data) {
                fetchedRequests.push({
                    ...response.data[key],
                    key: key
                });
            }
            setRequests(fetchedRequests);
            
        })
        .catch(error => console.log(error));
console.log(Requests, "requests");
    

    return (
        <>
            <div id="main">
                <header>
                    <h1>Requests</h1>
                </header>
                <p>
                    List of current requests
                </p>
                <div className="requestsContainer">
                    <table>
                        <thead>
                            <th>Title</th>
                            <th>Request By</th>
                            <th>Date</th>
                            <th>Remove</th>
                        </thead>
                        <tbody>
                            {
                                RequestList && RequestList.map((data, index) => {
                                    return (
                                        <tr key={index}>
                                        <td><a href={data.requestURL}>{data.requestTitle}</a></td>
                                        <td><a href={"mailto:" + data.contactEmail}>{data.requestUser}</a></td>
                                        <td>{data.requestDate}</td>
                                        <td>icon</td>
                                    </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </>
    )
}


export default Requests;

函数请求（）{
const[RequestList，setRequests]=useState（“”）；
get（'firebasedatabase.json'）
。然后（响应=>{
常量fetchedRequests=[]；
for（让输入response.data）{
获取请求推送({
…响应.数据[键]，
钥匙：钥匙
});
}
setRequests（fetchedRequests）；
})
.catch（错误=>console.log（错误））；
控制台日志（请求，“请求”）；
返回(
请求

当前请求列表

标题
请求
日期
去除
{
RequestList&&RequestList.map（（数据、索引）=>{
返回(
{data.requestDate}
偶像
)
})
}
)
}
导出默认请求；

您需要将axios放在函数中，并在useEffect中调用它。因此，这样它将只调用axios一次。 确保在顶层导入useEffect

const callApi = () => {
   axios
      .get('firebasedatabase.json')
      .then(response => {
         const fetchedRequests = [];
         for (let key in response.data) {
            fetchedRequests.push({
               ...response.data[key],
               key: key,
            });
         }
         setRequests(fetchedRequests);
      })
      .catch(error => console.log(error));
   console.log(Requests, 'requests');
};

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

---

因为每次发生更改时都会重新渲染组件。在您的情况下，当您调用Axios并设置需要react重新渲染的状态时。因此，当它重新渲染组件时，Axios会一次又一次地被调用。

谢谢！这一点现在看来很明显…^^；不用担心，您可以通过点击勾号图标接受我的答案，这样其他人就会知道这是一个有效的解决方案，谢谢：）可能应该将RequestList添加到UseFefferdependancies@eamanola不，因为这将再次调用Axios无数次，因为状态得到更新。真的真的，我的错