未捕获的TypeError：无法读取reactjs

Question

import React from 'react';
import ReactDOM from 'react-dom';
var axios = require('axios');
class Application extends React.Component {        
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);        
    this.state = {
      dropdownItems: []
    };
  }        
  deleteDd(index) {
    let dropdownItems =  this.state.dropdownItems.filter(item => item!==index);
    this.setState({dropdownItems: dropdownItems});
  }        
  handleClick() {
    let dropdownItems = [...this.state.dropdownItems];
    dropdownItems.push(dropdownItems.length);
    this.setState({dropdownItems: dropdownItems});
  }        
getInitialState() {
    return {
      company: []
    }
  }
//trying to get json data into dropdown by passing the json object into the url         
  componentDidMount(){var _this = this;
    this.serverRequest = axios

        .get("myurl")
        .then(function(result) {    
          _this.setState({
            company: result.data.company        
          });
          //console.log(jobs);
        })
  }        
  componentWillUnmount(){
    this.serverRequest.abort();
  }
  render() {
    let dropdowns = this.state.dropdownItems.map(item =>
      (<MyDropdown key = {item} num = {item} onDeleteMe ={this.deleteDd.bind(this, item)} />));        
    return (
    <div>
    <h1 className="text-left page-title">Higher</h1>
    <h2 className="text-left">CTR</h2>
    <h3 className="text-left">ABC</h3>            
    <div>       
            <form>
    <select className="dropdown menu dropdown-style" data-dropdown-menu>
                        <option defaultValue>Choose one</option>
                        <option value="test">test</option>
                        <option value="test1">test1</option>               
                    </select>
      //here is where all my json data resides in company              
        <h1>Companies!</h1>
        {this.state.company.map(function(company) {
          return (
            <div key={company.id} className="company">                      
                {company.Company}      
                                 </div>);})}
            </form>

我收到此错误“Uncaught TypeError：无法读取未定义的属性'map'”我正在尝试将json数据加载到下拉列表中请帮助。我已经尝试了所有可能的方法，但仍然无法确定问题是什么，非常感谢任何帮助。

Answer 1

当您扩展React.Component以创建React组件时，getInitialState不会初始化状态变量。您需要在constructor中执行此操作。当您将company初始化为空数组并使用getInitialState()进行陈述时，Hnece没有设置它，因此最初this.state.company未定义。

在构造函数中初始化状态，它应该没问题。另外，为了避免任何问题，您可以在映射之前执行未定义的检查，例如{this.state.company && this.state.company.map(function(company) {...})}

import React from 'react';
import ReactDOM from 'react-dom';
var axios = require('axios');
class Application extends React.Component {        
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);        
    this.state = {
      dropdownItems: [],
      company: []
    };
  }        
  deleteDd(index) {
    let dropdownItems =  this.state.dropdownItems.filter(item => item!==index);
    this.setState({dropdownItems: dropdownItems});
  }        
  handleClick() {
    let dropdownItems = [...this.state.dropdownItems];
    dropdownItems.push(dropdownItems.length);
    this.setState({dropdownItems: dropdownItems});
  }        

//trying to get json data into dropdown by passing the json object into the url         
  componentDidMount(){var _this = this;
    this.serverRequest = axios

        .get("myurl")
        .then(function(result) {    
          _this.setState({
            company: result.data.company        
          });
          //console.log(jobs);
        })
  }        
  componentWillUnmount(){
    this.serverRequest.abort();
  }
  render() {
    let dropdowns = this.state.dropdownItems.map(item =>
      (<MyDropdown key = {item} num = {item} onDeleteMe ={this.deleteDd.bind(this, item)} />));        
    return (
    <div>
    <h1 className="text-left page-title">Higher</h1>
    <h2 className="text-left">CTR</h2>
    <h3 className="text-left">ABC</h3>            
    <div>       
            <form>
    <select className="dropdown menu dropdown-style" data-dropdown-menu>
                        <option defaultValue>Choose one</option>
                        <option value="test">test</option>
                        <option value="test1">test1</option>               
                    </select>
      //here is where all my json data resides in company              
        <h1>Companies!</h1>
        {this.state.company && this.state.company.map(function(company) {
          return (
            <div key={company.id} className="company">                      
                {company.Company}      
                                 </div>);})}
            </form>