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

【问题标题】：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 中的问题

标签： javascript reactjs react-hooks jsx

【解决方案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();
}

【讨论】：