Как в реакте вывести значение в компонент от ответа сервера?

Question

[hollanditkzn]

Есть один нюанс, пришли вот такие даныне

Делаю сразу неправильно, потому что пробовал по всякому пока не получилось. Но логика скорее всего понятная будет

import React, {Component} from 'react';
import Header from './Header';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import axios from 'axios';

class Home extends Component{
    constructor(props){
        super(props);
    }
    componentWillMount(){
        axios.get('/api/test-thema').then(response => this.setState(response.data));
    }
    themaList(){
        console.log(this.state);
         for(let i = 0; i<this.state.length; i++){
/** Не знаю как правильно, пробовал и через map но тоже не получается у меня, То есть мне нужно вывести весь список в виде ссылки*/
             <li><Link to='/test/'+{this.state[i].id}>{this.state[i].name}</Link></li>
         }
    }
    render(){
        const { user } = this.props;
        return(
            <div>
                <Header/>
                <h1>Добро пожаловать</h1>
                <div>ФИО: {user.name}</div>
                <div>Должность: </div>
                
                <h3>Доступные тесты: </h3>
<ul>
                    {this.themaList()}//Сюда надо вывести список тем на тесты
                </ul>
                <h3>Доступные тренинги: </h3>
            </div>
        );
    }
}
const mapStateToProps = state => ({
    user: state.login.user
});

export default connect(mapStateToProps)(Home);

Answer 1

[Алексей Уколов]

Поскольку у вас с сервера приходит объект, то и работать с ним нужно как с объектом. Ну а лучше преобразовать в массив, поскольку ключи всё равно смысловой нагрузки не несут в данном случае.

class Home extends Component{
    state = {items: []};

    componentWillMount(){
        axios.get('/api/test-thema')
            .then(response => this.setState({item: Object.values(response.data)}));
    }

    render(){
        const { user } = this.props;
        return(
            <div>
                <Header/>
                <h1>Добро пожаловать</h1>
                <div>ФИО: {user.name}</div>
                <div>Должность: </div>
                
                <h3>Доступные тесты: </h3>
                <ul>
                    {this.state.items.map((item) => (
                        <li key={item.id}><Link to='/test/'+{item.id}>{item.name}</Link></li>
                    ))}
                </ul>
                <h3>Доступные тренинги: </h3>
            </div>
        );
    }
}

Comments

[Антон Спирин]

key забыли:

{this.state.items.map(item => (
  <li key={item.id}>
    <Link to=`/test/${item.id}`>{item.name}</Link>
  </li>
))}