Question

我已经使用ant表创建了一个简单表。我试图从API获取值，但出现此异常：

无法获取未定义或空引用的属性“数据”

我的示例代码是

import React from "react"
import { Table } from 'antd';

class StudentTable extends React.Component {

  componentDidMount() {
    fetch("https://randomuser.me/api/?results=200&nat=us")
      .then(Response => Response.json())
      .then(findresponse => {
        console.log(findresponse.results);
        this.setState({
          data: findresponse.result

        });
        console.log(this.state.data);
      });
  }

  render() {
    const columns = [
      {
        title: 'Gender',
        dataIndex: 'gender',
        key: 'gender',
      }, 
      {
        title: 'Email',
        dataIndex: 'email',
        key: 'email',
      }
    ]
    const data = []
    return(
      <div>
        <h2>Student Data</h2>
        <Table 
          dataSource={this.state.data}
          columns={columns}/>   
        </div>
    )
  }
}

export default StudentTable

Answer 1

您没有在组件中初始化状态，因此在第一个渲染中this.state是null。

如果您使用的是盖茨比，则可能会初始化状态

class StudentTable extends React.Component {
  state = { data: ... };
  componentDidMount() { ... }
  ...
}

或在构造函数中这样做

class StudentTable extends React.Component {
  constructor(props) {
    super(props)
    this.state = { data: ... }
  }
  componentDidMount() { ... }
  ...
}

如何使用gatsby-ant-plugin从api获取表数据

1 个答案: