遺漏的類型錯誤：無法讀取性能在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> 

我收到此錯誤的不確定「地圖」「遺漏的類型錯誤：無法讀取的未定義的屬性‘地圖’」我試圖JSON數據加載到一個下拉列表，請幫助。我嘗試了所有可能的方式，但仍然無法確定問題所在，非常感謝所有幫助。

Answer 1

當您擴展React.Component以創建React組件時，getInitialState不會初始化狀態變量。你需要在constructor。 HNE當你初始化company作爲一個空陣列來陳述與getInitialState()，它沒有設置它，因此最初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>