キャッチされない例外TypeError：私は助けてくださいドロップダウンにJSONデータをロードしようとしています：私はこのエラー「プロパティを読み取ることができません未定義の 『マップ』をキャッチされない例外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> 

に未定義のプロパティ「マップ」を読み取ることができません。私は可能な限りすべての方法を試しましたが、問題が何であるか把握することができませんでした。どんな助けでも大変感謝しています。

Answer 1

React.Componentを拡張してReactコンポーネントを作成すると、getInitialStateは状態変数を初期化しません。あなたはconstructorでそれをする必要があります。あなたがgetInitialState()と空の配列としてcompanyを初期化するとき、それはそれを設定しなかったので、最初は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> 

[未定義のプロパティ「マップ」を読み込めません]の