javascript - react 触发无限请求

Question

What I am trying to do?

我正在尝试调用一个发送信息的 api，并且我想将信息呈现给 React 应用程序。我已经实现了我想要的，但是有一个问题。

THE PROBLEM

如下图所示，React 正在向 api 发出无限请求。

app.js

import React, { useState } from 'react';
import './css/main.css'

const App = () => {
  const [data, setData] = useState([]);
  fetch(`http://localhost/api/index.php`).then((res)=>{return res.json()}).then(
    (data)=>{
      setData(data)
    }
  )

  return (
    <div>
      {data.length > 0 && (
        <ul>
          {data.map(ad => (
            <li key={info.id}>
              <h3>{info.name}</h3>
              <p>{info.details}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Answer 1

为什么不起作用？

发生这种情况的原因是您正在动态获取数据并更新状态，导致组件重新渲染，然后再次获取数据、设置状态、重新渲染(陷入循环)。

如何解决？

你应该使用 useEffect 钩子(Hook)(阅读更多 here )。此外，您可以在官方文档网站上阅读有关数据获取的更多信息 here .

您的代码会发生什么变化？

整个获取将被包裹在 useEffect Hook 中。

  useEffect(() => {
    fetch(`http://localhost/api/index.php`).then((res)=>{return res.json()}).then(
      (data)=>{
        setData(data)
      }
    )
  }, []);