Question

当ajax调用花费时间返回数据时，我面临的数据是“未定义”的问题，以解决我已经使用Render方法中的turnery运算符检查了数据并且它工作正常的情况，这是我在这里做的正确吗或者可以通过更好的方法解决。

我使用以下代码导致错误，因为它正在等待数据。

<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;`

Answer 1

您几乎是什么，您可以做的一项改进是：
代替

{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>
);

如果希望完成api调用，可以使用 async await ，但是我不建议这样做，在从服务器获取数据时，应该向用户展示一些信息。您可以像这样异步等待：

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

但是在这种情况下它将无法正常工作，因为componentDidMount在挂载后被调用，并且如果组件已挂载，则错误已经发生，并且您不应该使用已被弃用的componentWillMount。您将不得不在某个位置的父组件中异步等待。但是，不要经历所有麻烦，只需按照我上面的建议进行即可。

还有什么其他方法可以等待来自React组件中Ajax调用的数据

1 个答案: