React js не приходят данные по axious запросу

189

06 сентября 2018, 04:00

Отправляю данные axious'ом на свой сервер, данные(если проверить вручную) приходят. Через axious - нет. Можете попробовать потестировать через 178.150.137.228:3000/list и 178.150.137.228:5303/users Вот код компонентов:

Persons:

import React from "react";
class Person extends React.Component {
    render() {
        return (
            <a href="http://178.150.137.228:5303/register">{this.props.id}</a>
        );
    }
}
export default Person

List:

import React from "react";
import Person from "./Person";
import axios from 'axios';
class List extends React.Component {
    render() {
        let persons = [];
        axios.get("http://178.150.137.228:5303/users")
            .then(res => {
                var users = Object.values(res.data);
                users.map(function (user) {
                    return <li> <Person id={user.toString()}/> </li>
                });
                console.log(users);
                persons = users;
            })
        return(
            <ul>
                {persons}
            </ul>
        );
    }
}
export default List

Answer 1

Вы используете асинхронный вызов, те в момент когда реакт будет отображать {person}, в нем еще ничего не будет. Можно использовать state - в него ложим setState'ом то, что пришло через axios вот так:

state = {
    users: [],
  }
  render() {
    axios.get('http://178.150.137.228:5303/users')
      .then(({data}) => this.setState({users: [...Object.values(data)]}))
    return (
      <ul>
        {this.state.users.map(user => (
          <li><Person id={user.toString()} /></li>
        ))}
      </ul>
    )
  }