Есть ли другой способ ожидания получения данных от Ajax-вызова в компоненте React? - PullRequest
Новая
       11

Есть ли другой способ ожидания получения данных от Ajax-вызова в компоненте React?

0 голосов
/ 18 января 2019

Я сталкивался с вопросом о том, что вопрос «неопределен», когда вызов ajax требует времени для возврата данных, чтобы исправить то, что я проверил данные с помощью оператора turnery в методе Render, и он работает отлично, это правильно, что я делаю здесь или это может быть решено лучше.

Я использовал следующее, что привело к ошибке, потому что ожидал данных.

<Table bordered columns={columns} dataSource={profile.data.data} />

Когда я использовал следующий, он работал

{profile.data ? <Table bordered columns={columns} dataSource={profile.data.data} /> : ''}

Мой файл компонента 

import React, { Component } from 'react';
import { connect } from 'dva';
import { Table } from 'antd';

@connect(({ profile }) => ({
  profile,
}))
class WorkAccess extends Component {
  componentDidMount() {
   const { dispatch } = this.props;
   dispatch({ type: 'profile/Workaccess' });
 }

  render() {
   const { profile } = this.props;
   const columns = [
      { title: 'Name', dataIndex: 'name', key: 'Name' },
      { title: 'Privilege', dataIndex: 'privilege', key: 'Workacess' },
    ];
    return (
      <div>
        {profile.data ? <Table bordered columns={columns} dataSource={profile.data.data} /> : ''}
      </div>
    );
  }
}

export default WorkAccess;`

1 Ответ

0 голосов
/ 18 января 2019

То, что вы есть, почти в порядке, одно улучшение, которое вы можете сделать:
вместо 

{profile.data ? <Table bordered columns={columns} dataSource={profile.data.data} /> : ''}

Вы можете: 

if(!profile.data)
    return <h1>Loading</h1>;  // You can show some loading comonent here, instead of just writing loading
return (
  <div>
    <Table bordered columns={columns} dataSource={profile.data.data} />
  </div>
);

Вы можете использовать async await , если вы хотите, чтобы вызов API завершился, но я бы не советовал, вы должны показать что-то пользователю, пока вы извлекаете данные с сервера. Вы можете async ждать, как это: 

async componentDidMount(){
    await dispatch({ stuff })
}

Но в этом случае это не будет работать, потому что componentDidMount вызывается после монтирования, и если компонент смонтирован, ошибка уже произошла, и вы не должны использовать componentWillMount, поскольку она устарела. Вам придется где-то асинхронно ожидать в родительском компоненте. Но не проходите через все эти неприятности, просто сделайте то, что я предложил выше.

...