无休止的 axios 请求

Question

我已经正常工作了，从 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;

Answer 1

你需要将你的 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 并且您正在设置需要对重新渲染做出反应的状态时。因此，当它重新渲染组件时，Axios 会被一次又一次地调用。