Question

我使用下面的代码成功显示了 two 表中的记录，并且工作正常

这是我的问题：

现在我需要在加载记录时显示和隐藏加载的图像或文本。我添加了

 const [loading, setLoading] = useState(true);
 setLoading(false);

  
let image_loading;
if (loading) {
image_loading = 'Data is being loaded'
}

作为回报，我在下面添加了代码

<span>{image_loading}</span>

当我现在运行脚本时，它显示错误：

错误：重新渲染次数过多。 React限制了渲染次数以防止无限循环。

似乎导致此错误的代码行是setLoading(false);。我有a reference solution，但与点击事件有关。

代码如下：

import {initializeBlock, useBase, base, useRecords} from '@airtable/blocks/ui';
import React, { Component } from "react";
import ReactDOM from 'react-dom';



 function Rec() {
  const [loading, setLoading] = useState(true);
  const currentDate = new Date();

const base = useBase();

// get content of first table
 const tab1 = base.getTableByNameIfExists('myfirst_table');
 // grab all the records from that table
 const records = useRecords(tab1);

// get content of second table
const tab2 = base.getTableByNameIfExists('mysecond_table');
 // grab all the records from that table
 const records2 = useRecords(tab2);

if(records2){
setLoading(false);

}

let image_loading;
if (loading) {
image_loading = 'Data is being loaded'
} 

     return (
<div>
    <span>{image_loading}</span>


<div>
<h1> First Records</h1>
             {records.map(record => {

                 return <li key={record.id}>{record.id} </li>


             })}
</div>


<div>
<h1> First Records</h1>
{records2.map(record2 => {

                 return <li key={record2.id}>{record2.id} </li>


             })}

 </div>

 </div>

     );
 }
  
export default Rec;

Answer 1

通常情况下，您希望在useEffect内部调用setState或useState函数，并附带条件。问题在这里：

if (records2) {
  setLoading(false);
}

当代码到达此处时，records2确实存在，因此它设置了状态。状态更改后，组件将重新渲染，然后再次运行此功能，然后无限循环进行。

您可以使用useEffect使setLoading的运行以其他变量为条件。像这样：

useEffect(() => {
  if (records2){
    setLoading(false)
  }
}, [records2])

所以现在setLoading仅在records2更改且存在的情况下运行。

如何正确避免错误“ reactjs中的重新渲染次数过多”

1 个答案: