Question

我有一个react组件，它显示一个表格。如果数据长度为0或数据本身为空，那么我将显示消息“无数据”。

我面临的问题是，短暂地显示消息（不存在数据）几毫秒，然后出现表格。

请在我的实现下方找到

。

{!isLoading && !isError && (
  <div>
    {!isDataExists && (
      <Message>
        No Data exists
      </Message>
    )}
    {isExists && (
      <Table />
    )}
  </div>
)}

请注意，我正在使用React功能组件。

Answer 1

由于您有一个loading变量，因此我假设您正在从外部API获取数据。因此，您的模式应如下所示：

如果短暂出现No data exists消息，那是因为在设置数据之前，您的loading状态变成了false。请注意您的setState呼叫顺序，以及在将loading转到false之前是否正在等待数据。

您的loading初始状态应为true。

注意：：您应该在async-await上使用.then()而不是useEffect。我在这里使用它是因为stackoverflow片段已过时，并且不允许我使用async-await。

function getDataFromApi() {
  return new Promise((resolve,reject) => {
    setTimeout(() => resolve("TABLE DATA"),1000);
  });
}

function App() {

  const [tableData,setTableData] = React.useState(null);
  const [loading,setLoading] = React.useState(true);
  
  React.useEffect(() => {
    getDataFromApi().then((data) => {
      setTableData(data);
      setLoading(false);
    });
  },[]);

  return(
    loading ?
      <div>Data is loading...</div>
    : <div>{tableData}</div>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

反应条件渲染顺序

1 个答案: