Как создать кнопку детализации с помощью ReactJS

Question

В настоящее время я создаю новый компонент на activJS, который должен отображать сведения только о конкретном пользователе, который нажимается в другом компоненте.Однако я сталкиваюсь с проблемами при попытке собрать данные из серверной части во внешний интерфейс.

Вот компонент, который показывает список всех пользователей (consultants.component.js):

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import './consultants.component.css'
import axios from 'axios';

const Consultant = props => (
    <tr>
        <td>{props.consultant.employee_name}</td>
        <td>{props.consultant.employee_title}</td>

        <td>
            <NavLink to={'/detail_consultant/'+props.consultant._id}><button className='btn btn-info ml-auto'>details</button></NavLink>
        </td>
    </tr>
)

export default class ConsultantList extends Component {
    constructor(props) {
        super(props);

        this.state = {consultants: []};
    }

    componentDidMount() {
        axios.get('http://localhost:5000/consultants/')
        .then(response => {
            this.setState({ consultants: response.data })
        })
        .catch((error) => {
            console.log(error);
        })

    }

    consultantList() {
        return this.state.consultants.map(currentconsultants => {
            return <Consultant consultant={currentconsultants} key={currentconsultants._id}/>;
        })
    }

    render() {
        return (
            <div className='consultant-page'>
                <h3>List of Consultants</h3>
                <table className='table-responsive'>
                    <thead className='table table-striped'>
                        <tr>
                            <th scope='col'>Employee Name</th>
                            <th scope='col'>Title</th>
                            <th scope='col'>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        { this.consultantList() }
                    </tbody>
                </table>
            </div>
        )
    }

}

Когда пользователь нажимает на конкретную строку из таблицы всех пользователей, его конкретный идентификатор передается в URL, и пользователь также перенаправляется на другой компонент.Ниже приведен компонент, который должен отображать сведения о конкретном выбранном пользователем:

import React, { Component } from 'react';
import axios from 'axios';


const Consultant_information = props => (
    <div>
        <p>Employee Name: {props.consultant_information.employee_name}</p>
        <p>Employee Title: {props.consultant_information.title}</p>
    </div>
)

export default class Detail_consultant extends Component {
    constructor(props) {
        super(props);

        this.state = {consultants: []}
    }

    componentDidMount() {
        axios.get('http://localhost:5000/consultants/' + this.props.match.params.id)
        .then(response => {
            this.setState({ consultants: response.data })
        })
        .catch((error) => {
            console.log(error);
        })
    }

    detailConsultant() {
        return this.state.consultants.map(currentconsultant => {
            return <Consultant_information consultant_information={currentconsultant} key={currentconsultant._id}/>;
        })
    }

    render() {
        return (
            <div className='consultant-page'>
                { this.detailConsultant() }
            </div>
        )
    }

}

Я уже тестировал get /: id с Insomnia, и он работает нормально, поэтому проблема должна быть впереди-end.

Вот ошибка, которую я сейчас получаю

Может кто-нибудь помочь мне разобраться в чем дело?

Спасибо.

Answer 1

Убедитесь, что данные, полученные из серверной части, в вашем запросе Axios в методе componentDidmount Lifecycle в Detail_consultant component являются массивом.Трассировка стека предполагает, что response.data не является массивом и, возможно, объектом, у которого нет метода .map() в его прототипе.Если это Объект, нацельтесь на Массив в пределах response.data набора, который находится в состоянии, и все будет работать соответственно.Примером может быть:

    componentDidMount() {
        axios.get('http://localhost:5000/consultants/' + this.props.match.params.id)
        .then(response => { 
            this.setState({ consultants: response })
        })
        .catch((error) => {
            console.log(error);
        })
    }