Question

使用Map函数在reactJs.I中显示JSON数组元素已尝试使用以下代码。我无法得到结果并且它说“无法读取null的属性'_currentElement'”。请帮我解决这个问题。

import React, { Component } from 'react';
import Header from './js/components/Header';
import './App.css';
import './dist/css/bootstrap.css';
import cookie from 'react-cookie';
import Request from 'superagent';
import { browserHistory  } from 'react-router';

export default class Performance extends Component {
  constructor() {
    super();
    this.state = {
        fullName : cookie.load('fullName'),
        empId : cookie.load('empId'),
        userResults : false
    };       
    if(cookie.load('empId') === undefined ){
        browserHistory.push('/login')
    }   
    
}
 getInitialState(){
    return {userResults:false};
 }

 componentDidMount() {
    var self = this;
    var url = 'http://192.168.1.93:8081/employee/dashboard';
    Request
        .get(url)
        .query({ empId: this.state.empId })
         .set('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8')
        .set('Authorization', 'Basic aHJtczox')
        .set('Accept', 'application/json')
        .end(function(err, res){
            self.setState({userResults:  res.body});
           console.log(self.state.userResults); 
        });
  }
 
  render() {        
        return ( 
        <div>
        <Header />  
            <div className="container ">
                <form className="form-signin1"> 
                <h2 className="form-signin-heading">Customer Orientation{this.props.userButtons}</h2>
                <table className="table text-center" >
                    <thead>
                        <th >Deliverables</th>
                    </thead>
                    <tbody>
                        {
                            this.state.userResults.response.QuestionSection.map(function(res){
                                res.question.map(function(res1){
                                    return (
                                        <tr>
                                            <td>{res1.question}</td>
                                        </tr>
                                    )
                                })
                            })
                        }
                        <tr><td>sdfsdf</td></tr>              
                    </tbody>
                </table>                
                <button className="btn btn-lg btn-primary btn-block" type="button">Sign in</button>
                </form>
            </div> 
        </div>
            
        );
    }
}

Answer 1

由于this.state.userResults.response最初不存在，您会收到此错误。在迭代之前执行检查更好。你还需要返回内部map函数的结果

  {
         this.state.userResults.response && this.state.userResults.response.QuestionSection.map(function(res){
              return res.question.map(function(res1){
                    return (
                        <tr>
                            <td>{res1.question}</td>
                        </tr>
                    )
               })
          })
 }

我想在reactJs中显示JSON结果

1 个答案: