javascript - 使用反应表中的列渲染表后页面显示空白？

问题描述

我是反应开发的新手。我正在尝试创建一个显示从 api 接收的 json 内容的表。我使用了两个js，一个是App.js，另一个是form.js .. 下面是代码

表单.js

import React, {Component} from 'react';

import {Table} from "react-bootstrap";



class Form extends Component {

    constructor(props){
        super(props);
        this.state = {
            posts: []
        }
    }

    componentDidMount(){
        const url = 'https://jsonplaceholder.typicode.com/posts';
        fetch(url, {
            method: 'GET',          
        }).then(response => response.json()).then(recievedJson => {
            this.setState({posts: recievedJson})
        })
    }

    
    render(){
       
        const columns =  [
            {
                Header: "User ID",
                accessor: "userId"

            },
            {
                Header: "ID",
                accessor: "id"

            },
            {
                Header: "Title",
                accessor: "title"

            },
            {
                Header: "Content",
                accessor: "body"

            }

        ]

        return( 

           <Table columns={columns} data= {this.state.posts} />
   
        )
    }

}


export default Form;

和 App.js

import React, { useState, Component } from 'react';
import logo from './logo.svg';
import './App.css';

import Form from './components/form'




function Welcome () { 

  const [region, setRegion] = useState([
    {Name: 'Kochi', status: '23 ° C'},
    {Name: 'Khanna', status: '29 °C'},
    {Name: 'Kollam', status: '24 °C' }
  ])

    return(
     <div className="app" >
      <h1>Hello</h1>
      <Form />
    </div>
    );
  
          }

export default Welcome;

实际的

The page not rendering the table defined with the columns

我搜索了解决方案，但在我的情况下这对我没有帮助

感谢是否有人可以帮助我？

谢谢

标签： javascriptreactjsecmascript-6

javascript - 使用反应表中的列渲染表后页面显示空白？

问题描述

表单.js

实际的

解决方案

推荐阅读