Reactjs не отображает данные из базы данных - PullRequest
Новая
       18

Reactjs не отображает данные из базы данных

0 голосов
/ 18 ноября 2018

Я изучаю React. Я сталкиваюсь со странной проблемой, которая должна быть очень простой. Моя цель - получить данные из API и показать данные в виде таблицы. Пожалуйста, обратите внимание, что я использую Mobx для управления своими данными.

Моя проблема в том, что реагирует на получение данных от API, но не на рендеринг данных. 

import React, { Component } from "react";
import Mystore from "../Storage/Mystore";
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
import axios from "axios";
import {observer} from "mobx-react";
import { withRouter } from "react-router";
class ElementSelect extends Component {
    constructor(props){
        super(props);
        this.state = {
            element_type: Mystore.element_select.element_type,
            element_list:[]
        }
        //this.return_row = this.return_row.bind(this);
        Mystore.page.title = "Select Element";
    }

    componentDidMount() {
        axios.post('http://localhost/phoenix/public/api/get_element', 
          {
            client_id: Mystore.user_info.client_id,
            element_type: Mystore.element_select.element_type,
            problem_category: Mystore.element_select.problem_category
          })
          .then(response=>{
            if(response.status === 200){
                this.setState({element_list: response.data.data});
            }
            console.log(this.state);
            //console.log(Mystore.element_select.element_list);
          })
          .catch(function (error) {
            console.log(error);
          });

          console.log("State");
          console.log(this.state);
    }

    render() {

        return <div className="card padding-5">
        <Table>

        <Thead>

                {
                        <Tr>
                            <Th>Link Name ID</Th>
                            <Th>Link ID</Th>
                            <Th>Vlan ID</Th>
                            <Th>District</Th>
                            <Th>Link Name NTTN</Th>
                            <Th>Link Name Gateway</Th>
                            <Th>Ticket List</Th>
                            <Th>Action</Th>
                        </Tr>

                }


        </Thead>
        <Tbody>


            {
                        this.state.element_list.map(
                            element => {
                                <Tr>
                                    <Td>{element.link_name_id}</Td>
                                    <Td>{element.link_id}</Td>
                                    <Td>{element.vlan_id}</Td>
                                    <Td>{element.district}</Td>
                                    <Td>{element.link_name_nttn}</Td>
                                    <Td>{element.link_name_gateway}</Td>
                                    <Td>{element.OPT} {element.SPT}</Td>
                                    <Td><button>Select Element</button></Td>
                                </Tr>

                            }
                        )         
            }

        </Tbody>
        </Table>
        </div>;
    }
}

export default withRouter(observer(ElementSelect));

Мои данные загружаются отлично. Если я распечатываю состояние в консоли, я также вижу данные. Но данные не отображаются в представлении.

Я попытался переместить код из array.map в функцию. затем вызовите эту функцию, чтобы вернуть строку. Но это не сработало.

Я также попытался загрузить данные в моем состоянии Mobx и отобразить данные из этого состояния Mobx. Тем не менее, это не сработало.

Я задаюсь вопросом, насколько НК Мобкса испортила или нет.

Понятия не имею, почему такая простая вещь не работает.

1 Ответ

0 голосов
/ 18 ноября 2018 
if(response.status === 200){
    this.setState({element_list: response.data.data);
 }

вы пытаетесь изменить состояние, попробуйте это.

Эта статья может помочь вам введите описание ссылки здесь .

...