React-使用useEffectHook时，数据不会渲染

有时，在React中使用useEffect Hook时，我们会注意到数据没有按预期渲染到屏幕上。这是因为useEffect默认是在每次组件重新渲染时都会运行，而我们的代码可能并不需要每次都运行。

为了解决这个问题，我们可以在useEffect中传入第二个参数，该参数是一个数组，包含当中传入的变量（或状态）。只有当这些变量发生变化时，useEffect才会运行。

例如，假设我们有以下组件：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [myData, setMyData] = useState([]);

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

  const fetchData = async () => {
    const response = await fetch('http://myapi.com/data');
    const data = await response.json();
    setMyData(data);
  };

  return (
    <div>
      {myData.map(item => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

此时，我们希望在组件第一次渲染时，通过调用fetchData函数来获取数据。然而，我们会发现数据并没有渲染到屏幕上。

这是因为useEffect每次都会运行fetchData函数，导致myData状态被不断地重置为初始值[]。为了解决这个问题，我们需要将useEffect的第二个参数设置为[]，以此表示我们希望在组件第一次渲染时运行fetchData函数，但不希望在以后的重新渲染中再次运行。

修改后的代码如下：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [myData, setMyData] = useState([]);

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

  const fetchData = async () =>