亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在反應JS中異步呈現內容

在反應JS中異步呈現內容

哈士奇WWW 2022-09-11 20:19:52
基本上,我有一組動態表,這些表是根據傳遞的值顯示的。如果傳遞了一個空數組,它應顯示“未找到數據”。在我的情況下,當我向表發送數據時,所有表將首先顯示“未找到數據”,然后是實際的表內容。我不確定是什么原因造成的。數據是異步加載的,它顯示沒有找到的數據,然后顯示實際內容。我添加了 setInterval 來展示這種異步特性沙盒:https://codesandbox.io/s/react-table-row-table-ryiny?file=/src/index.js:0-1322有人可以幫助我嗎?父母import * as React from "react";import { render } from "react-dom";import DataGrid from "./DataGrid";const d1 = [{ name: "test", age: "20" }, { name: "test1", age: "15" }];const d2 = [{ area: "area", pin: "123" }, { area: "area1", pin: "1245" }];const c1 = [  { Header: "Name", accessor: "name" },  { Header: "Age", accessor: "age" }];const c2 = [  { Header: "Area", accessor: "area" },  { Header: "Pin", accessor: "pin" }];const d3 = [];const c3 = [];class App extends React.Component {  constructor(props) {    super(props);    this.state = {      data1: [],      column1: [],      data2: [],      column2: [],      data3: [],      column3: []    };  }  componentDidMount() {    setTimeout(() => {      this.setState({        data1: d1,        column1: c1      });    }, 2000);    setTimeout(() => {      this.setState({        data2: d2,        column2: c2      });    }, 2500);    this.setState({      data3: d3,      column3: c3    });  }  render() {    return (      <>        <DataGrid data={this.state.data1} columns={this.state.column1} />        <DataGrid data={this.state.data2} columns={this.state.column2} />        <DataGrid data={this.state.data3} columns={this.state.column3} />      </>    );  }}孩子import * as React from "react";import ReactTable from "react-table";import "react-table/react-table.css";export default class DataGrid extends React.Component {  constructor(props) {    super(props);    this.state = {      showMore: false    };  }  toggleState = () => {    this.setState(prevState => ({      showMore: !prevState.showMore    }));  };
查看完整描述

2 回答

?
小唯快跑啊

TA貢獻1863條經驗 獲得超2個贊

在上面的答案中補充幾點。

它以這種方式運行的原因不是因為異步行為,而是 React 組件的生命周期性質。

  • 數據網格以數據的初始狀態呈現,即空[]數組。

  • 不顯示任何數據,因為空 [] 數組在此循環中傳遞。

  • 然后,您將在組件DidMount中設置狀態。

  • 為了顯示效果,數據網格再次使用實際數據重新呈現。


查看完整回答
反對 回復 2022-09-11
?
慕的地6264312

TA貢獻1817條經驗 獲得超6個贊

使用而不是空數組(沙盒)初始化應用狀態的數據:null


this.state = {

  data1: null,

  column1: [],

  data2: null,

  column2: [],

  data3: null,

  column3: []

};

在 DataGrid 中,檢查值是否為虛假(計數,但空數組為真實),如果是,則返回(無需呈現任何內容):methodnullnull


render() {

  const { data, columns } = this.props;


  if (!data) return null;


查看完整回答
反對 回復 2022-09-11
  • 2 回答
  • 0 關注
  • 111 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號