Reactjs ts/react-fetchin-useffect被多次调用

在我的功能组件中，我希望在组件挂载后获取数据。但不幸的是，请求被触发三次，直到停止。你能告诉我为什么吗

 const [rows, setRows] = useState<any[]>([]);
 const [tableReady, setTableReady] = useState<boolean>(false);
 const [data, setData] = useState<any[]>([]);


const getData = async () => {
      const user = await Amplify.Auth.currentAuthenticatedUser();
      const token = user.signInUserSession.idToken.jwtToken;
      const apiurl = 'xxx';

      fetch(apiurl, {
           method: 'GET',
           headers: {
                'Authorization': token
           }
      })
           .then(res => res.json())
           .then((result) => {
                setData(result);
           })
           .catch(console.log)
 }

 useEffect(() => {
      if (!tableReady) {
           getData();

           if (data.length > 0) {
                data.forEach((element, i) => {
                     const convertedId: number = +element.id;
                     setRows(rows => [...rows, (createData(convertedId, element.user))]);
                });
                setTableReady(true);
           }
      }
 }, []);

 return (
      <div className={classes.root}>
           <MUIDataTable
                title={""}
                data={rows}
                columns={columns}
           />
      </div>
 );

const[rows，setRows]=useState（[]）；
const[tableReady，setTableReady]=useState（false）；
const[data，setData]=useState（[]）；
const getData=async（）=>{
const user=await Amplify.Auth.currentAuthenticatedUser（）；
const token=user.signInUserSession.idToken.jwtToken；
常量apiurl='xxx'；
获取（apirl{
方法：“GET”，
标题：{
“授权”：令牌
}
})
.then（res=>res.json（））
。然后（（结果）=>{
设置数据（结果）；
})
.catch（console.log）
}
useffect（（）=>{
如果（！tableReady）{
getData（）；
如果（data.length>0）{
data.forEach（（元素，i）=>{
const convertedId:number=+element.id；
setRows（rows=>[…rows，（createData（convertedId，element.user）））；
});
可设置就绪（true）；
}
}
}, []);
返回(
);

---

由于注释，我更新了我的问题。

useEffect缺少依赖项数组，因此每次组件呈现时都会调用它的回调

解决方案 添加依赖项数组

useEffect(() => {
  if (!tableReady) {
    getData();

    if (data.length > 0) {
      data.forEach((element, i) => {
        const convertedId: number = +element.id;
        rows.push(convertedId);
      });
      setTableReady(true);
    }
  }
}, []); // <-- dependency array

---

useffect

缺少依赖项数组，因此每次呈现组件时都会调用其回调

解决方案 添加依赖项数组

useEffect(() => {
  if (!tableReady) {
    getData();

    if (data.length > 0) {
      data.forEach((element, i) => {
        const convertedId: number = +element.id;
        rows.push(convertedId);
      });
      setTableReady(true);
    }
  }
}, []); // <-- dependency array

---

嗨，德鲁，谢谢你的回复！这很有帮助。不幸的是，数据现在无法显示在表中。我更新了问题中的代码。@mapof我明白了，新问题基本上是因为React更新是异步的，并且在填充

行时，您不必等待
数据
状态更新。更新的答案，请查看。啊，是的，总是这些异步调用：D谢谢，它现在工作了，这很有帮助。嗨，德鲁，谢谢你的回复！这很有帮助。不幸的是，数据现在无法显示在表中。我更新了问题中的代码。@mapof我明白了，新问题基本上是因为React更新是异步的，并且在填充
行时，您不必等待
数据
状态更新。更新的答案，请查看。啊，是的，总是这些异步调用：谢谢，它现在工作了，这很有帮助。