Question

我在React应用程序中有地方可以进行Axios调用并显示数据。

但是，我想要一个for循环，并且我在stackover上找到了代码答案，但是它已经3岁了，所以我想知道是否有所改变。

我正在使用webApi代替Axios-这是一个别名，并且我正在应用程序的其他位置使用服务器路径，同时console.log(..的调用也正在显示数组。
我想知道.get / .then与function（event）的结构，在其他对Web api的调用中我不这样做
状态或render（）中的const可能有问题吗？好像已经发生了什么，并且html表仍然空白？

这是我打电话来检索数据，console.log显示数据很好。

webApi.get(`clinical/offlinemembers/${id}`)
        .then(function(event){
            console.log("event.data", event.data);
            th.setState({
                data: event.data
            });
        });

然后在完整的代码中，我将在下面粘贴，请注意const {contents}，如果这种样式的代码有效，我会喜欢的。

这是完整的.js代码

import React from 'react';
import webApi from './api/webApi';
import { withRouter, Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import queryString from 'query-string';
//import ActivateAccount from './ActivateAccount';


function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}


class MemberOffline extends React.Component {

    constructor(){
        super();
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        var th = this;


        const id = getQueryVariable('id');
        console.log("id", id );

        // webApi.get(`clinical/offlinemembers/${id}`)
        //     .then(res => {
        //         console.log("res", res);
        //     });

        webApi.get(`clinical/offlinemembers/${id}`)
            .then(function(event){
                console.log("event.data", event.data);
                th.setState({
                    data: event.data
                });
            });


    }

    render() {
        const contents = this.state.data.forEach(item => {
            //change the title and location key based on your API
            return <tr>
              <td>{item.member_name}</td> 
              <td>{item.member_ID}</td>
              <td>{item}</td>
              <td></td>
              <td></td>
            </tr>
        })
        return(
            <div class="container-fluid">
                <div>Case Trakker Dynamo Disconnect | TXAetna</div>
                <table class="table table-bordered">
                <tr>
                    <th>Member Name</th>
                    <th>Member ID</th>
                    <th>DOB</th>
                    <th>Current ILTCM Program Type</th>
                    <th>SAI Status</th>
                </tr>
                {contents}
                </table>
            </div>
        )
    }
}


export default MemberOffline;

Answer 1

这应该有效：

不需要var th = this;。您可以使用箭头功能，而无需恢复上下文。
无法在反应中渲染对象，它将引发错误。因此，不需要行<td>{item}</td>。

Map胜过forEach：由于我们不需要对数据造成副作用，因此map总共返回了一个新数组。 状态突变在反应上无能为力。

import React from 'react';
import webApi from './api/webApi';
import { withRouter, Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import queryString from 'query-string';
//import ActivateAccount from './ActivateAccount';


function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}


class MemberOffline extends React.Component {

    constructor(){
        super();
        this.state = {
            data: []
        }
    }

    componentDidMount() {

        const id = getQueryVariable('id');
        console.log("id", id );

        // webApi.get(`clinical/offlinemembers/${id}`)
        //     .then(res => {
        //         console.log("res", res);
        //     });

        webApi.get(`clinical/offlinemembers/${id}`)
            .then((event) => {
                console.log("event.data", event.data);
                this.setState({
                    data: event.data
                });
            });


    }

    render() {
        const contents = this.state.data.map(item => (
            //change the title and location key based on your API
            <tr>
              <td>{item.member_name}</td> 
              <td>{item.member_ID}</td>
              <td></td>
              <td></td>
            </tr>
        ))
        return(
            <div class="container-fluid">
                <div>Case Trakker Dynamo Disconnect | TXAetna</div>
                <table class="table table-bordered">
                <tr>
                    <th>Member Name</th>
                    <th>Member ID</th>
                    <th>DOB</th>
                    <th>Current ILTCM Program Type</th>
                    <th>SAI Status</th>
                </tr>
                {contents}
                </table>
            </div>
        )
    }
}


export default MemberOffline;

即使console.log输出显示数据

1 个答案: