在函数调用上反应无限循环

Posted 2023-02-21

【中文标题】在函数调用上反应无限循环

【英文标题】：React infity loop on function call

【发布时间】：2020-12-09 03:23:41

【问题描述】：

我有一个（当然）愚蠢的问题。

我的函数 getDataTbable 在无限循环中被调用我不明白为什么......所以请求是不定式调用的。

    export const TableResearch = (setSelectedSuggestion,setImages) => 
const [research, setResearch] = useState('');
const [suggestions, setSuggestions] = useState ([]);
const [table, setTable]= useState ([]);


const getDataTable = async () => 
  const data = await jsonbin.get('/b/5f3d58e44d93991036184474');
  setTable(data);
  console.log(table)
;
getDataTable();

【问题讨论】：

Ciao，但是您想在组件安装时只调用一次getDataTable(); 对吗？

是的，BARNOWL 解决了我在 cmets 中的问题

【参考方案1】：

那是因为TableResearch 函数被多次调用（每次渲染这个组件时）。如果您只想在安装组件时运行函数，则必须使用useEffect。这是一个例子：

useEffect(() => 
  const data = await jsonbin.get('/b/5f3d58e44d93991036184474');
  setTable(data);
, []);

传递给useEffect的第二个参数[]很重要。它使函数只运行一次。

您可以通过HERE了解更多关于useEffect的信息

【参考方案2】：

每次更改状态时组件都会重新渲染 (setTable)。

您应该使用useEffect 仅在第一次呈现时执行您的函数。

您也可能会遇到此警告：

警告：无法对未安装的组件执行 React 状态更新。

如果在组件卸载后异步调用完成。考虑到这一点，请像这样写useEffect：

// outside component
const getDataTable = async () => 
    const  data  = await jsonbin.get("/b/5f3d58e44d93991036184474");
    
    return data;
;

useEffect(() => 
    let mounted = true;

    getDataTable()
        .then(data => 
            if (!mounted) return;
            setTable(data);
        );

    return () => 
        mounted = false;
    ;
, []);

【参考方案3】：

你可以试试这个

useEffect(() => 
  const getDataTable = async () => 
    const  data  = await jsonbin.get("/b/5f3d58e44d93991036184474");
    setTable(data);
    console.log(table);
  ;

  getDataTable();
, []); // [] makes it runs once 

【讨论】：

我之前尝试过同样的方法并抛出 React Hook useEffect 缺少依赖项，但现在它已修复，我想我错过了一些东西！谢谢

@Jildo 如果这对您有帮助，您可以标记为答案吗？\

【参考方案4】：

是的，每次呈现视图时都会执行getDataTable();，包括返回数据时。

尝试像这样包装getDataTable()：

if (!table.length) 
  getDataTable()

但是你需要处理如果请求没有返回结果的情况，在这种情况下它仍然会无限运行：

const [table, setTable]= useState([]);
const [loading, setLoading]= useState();

const getDataTable = async () => 
  setLoading(true);
  const data = await jsonbin.get('/b/5f3d58e44d93991036184474');
  setTable(data);
  setLoading(false);
;

if (typeof loading === 'undefined' && !table.length) 
  getDataTable();