为什么使用效果渲染页面两次？

Question

我有一些数据正在尝试获取并与下面的代码一起使用，但是当我记录记录的值时，我首先得到一个空数组，然后是我获取的对象。因此，我无法在我的应用程序中访问该对象的信息。


  const [records, setRecords] = useState([]);

 useEffect(() => {
    async function getRecords() {
      const response = await fetch(`http://localhost:5000/record`);

      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`;
        window.alert(message);
        return;
      }

      const records = await response.json();
      setRecords(records);
    }

    getRecords();

    return;
  }, []);

  console.log(records);

Answer 1

第一次渲染触发效果。

效果调用 setRecords 触发第二次渲染。

您需要编写显示逻辑，以便它可以说明 records 默认为空数组。

为什么使用效果渲染页面两次？

Why is use effect rendering the page twice?

javascript

reactjs

react-hooks

use-effect

use-state