Reactjs未呈现数据库中的数据

Question

我正在学习React。我正面临着一个奇怪的问题，这个问题应该很简单。我的目标是从api获取数据，并在表中显示数据。请注意，我正在使用Mobx管理我的数据。

我的问题是react是从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状态呈现数据。尽管如此，它还是不起作用。

我想知道Mobx的HOC是不是有点混乱。

我不知道为什么像这样一个简单的东西不能工作。

Answer 1

if(response.status === 200){
    this.setState({element_list: response.data.data);
 }

您正在尝试改变状态，请尝试此操作。

本文可能会对您的enter link description here有所帮助。