使用axios.get呈现json数据

我是react.js新手，我正在尝试在表中获取JSON格式的服务器端数据。所以我所做的是：

export default class TableUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    table: [],
  }
}
componentDidMount(){
  axios.get('http://www.reddit.com/r/reactjs.json')
    .then((response)=>{
      const table = response.data.map(obj => obj.data);
        this.setState({ table });
      })
    .catch((err)=>{

    })
}

我用一种

的方式来表达这一点，比如：

render(){
    <div><p>{this.state.table.kind}</p></div>
}

render（）{
{this.state.table.kind}

}

为什么我得不到

种类的值

？ 请建议

obj.data

（在

data

中有属性

children

，即

Array

）是

Object

而不是

Array

，我认为在这种情况下最好更改默认状态，为

kind

（

String

）创建一个字段，为

data

（

Array

）创建一个字段，就像这样

类TableUser扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
种类：''，
数据：[]
};
}
componentDidMount（）{
axios
.get（'https://www.reddit.com/r/reactjs.json')
。然后（{data}）=>{
这个.setState（{
种类：数据。种类，
数据：data.data.children
});
})
.catch（（err）=>{}）
}
render（）{
const child=this.state.data.map（（el，index）=>{
返回
Title-{el.data.Title}

作者-{el.data.Author}

});
返回
{this.state.kind}

{child}
;
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);
data.json

{“电子邮件”：vp@gmail.com“，”密码“：“1234”}

获取数据.js

import React, { Component } from 'react';
import './css.css'
import Logout from './logout';
import axios from 'axios';
import { Redirect } from 'react-router-dom';

class Login extends Component {
constructor(props){
    super();
    this.state=({
        valid:false,
        email1:'',
        pass1:'',
        msg:'valid'
    })
    this.check = this.check.bind(this);
}
check()
{
    axios.get('http://127.0.0.1:8887/src/component/data.json')
        .then((response) => {
            this.setState({
                email1:response.data.email,
                pass1:response.data.password
            })
        })
  .catch((err)=> {})
    if(this.email.value === this.state.email1 && this.password.value === this.state.pass1)
    {
        this.setState({
            valid:true
        })
    }
    else{
        this.setState({
            msg:"invalid number"
        })
    }
}
render() {
    return (
        <div className="card-m">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input ref={(email1 => (this.email=email1))} type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" />
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input ref={(pass => (this.password=pass))} type="password" class="form-control" id="exampleInputPassword1" />
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1" />
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button onClick={this.check} type="submit" class="btn btn-primary">Submit</button>

            { this.state.valid &&
                <Redirect to="/logout" />
            }
        </div>
    );
}
}

export default Login;

import React，{Component}来自'React'；
导入“./css.css”
从“./Logout”导入注销；
从“axios”导入axios；
从'react router dom'导入{Redirect}；
类登录扩展组件{
建造师（道具）{
超级（）；
这个州=({
有效：假，
电子邮件1:“”，
密码1:“”，
消息：“有效”
})
this.check=this.check.bind（this）；
}
检查（）
{
axios.get（）http://127.0.0.1:8887/src/component/data.json')
。然后（（响应）=>{
这是我的国家({
email1:response.data.email，
pass1:response.data.password
})
})
.catch（（err）=>{}）
if（this.email.value===this.state.email1&&this.password.value===this.state.pass1）
{
这是我的国家({
有效：正确
})
}
否则{
这是我的国家({
消息：“无效号码”
})
}
}
render（）{
返回(
电子邮件地址
（this.email=email1））}type=“email”class=“form control”id=“exampleInputEmail1”aria descripebby=“emailHelp”/
我们永远不会与其他人共享您的电子邮件。
密码
（this.password=pass））}type=“password”class=“form control”id=“exampleInputPassword1”/
看看我
提交
{this.state.valid&&
}
);
}
}
导出默认登录；