Question

我正在学习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状态呈现数据。仍然没有用。

我想知道Mobx的HOC是否有些混乱。

我不知道为什么这样的简单事情不起作用。

Answer 1

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

您正在尝试改变状态，请尝试一下。

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

React.js没有从数据库渲染数据

1 个答案: