Question

我是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的价值？请建议!!

Answer 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>

List

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

使用axios.get渲染json数据

2 个答案: