使用 axios.get 渲染 json 数据答案

【问题标题】：Rendering json data with axios.get使用 axios.get 渲染 json 数据
【发布时间】：2017-04-13 17:54:55
【问题描述】：

我是 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)=>{

    })
}

我在<div> 中呈现这个，比如：

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

为什么我没有得到kind 的价值？请推荐！！

【问题讨论】：

标签： json reactjs axios

【解决方案1】：

obj.data(在data 中有属性children 是Array) 是Object 而不是Array，我认为在这种情况下最好更改默认状态，并为kind 创建一个字段(String) 和一个data (Array)，就像这样

class TableUser extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      kind: '',
      data: []
    };
  }
  
  componentDidMount(){
    axios
      .get('https://www.reddit.com/r/reactjs.json')
      .then(({ data })=> {
      	this.setState({ 
          kind: data.kind, 
          data: data.data.children
        });
      })
      .catch((err)=> {})
  }
      
  render() {
    const child = this.state.data.map((el, index) => {
      return <div key={index}>
        <p>Title - { el.data.title }</p>
        <p>Author - { el.data.author }</p>
      </div>
    });

    return <div>
      <p>{ this.state.kind }</p>
      <div>{ child }</div>
    </div>;
  }
}

ReactDOM.render(
  <TableUser />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.js"></script>
<div id="container"></div>

【讨论】：

【解决方案2】：

data.json

{ "email":"vp@gmail.com", "password":"1234" }

get_data.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;

【讨论】：