使用 axios.get 渲染 json 数据

Posted 2023-02-22

【中文标题】使用 axios.get 渲染 json 数据

【英文标题】：Rendering json data with axios.get

【发布时间】：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 的价值？ 请推荐！！

【参考方案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":"[e-mail]", "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;