定義對象的數組作爲ECMA6狀態變量/反應

Question

我試圖讓狀態對象數組如下

class DescriptionComponent extends React.Component { 


    constructor(props) { 
     super(props); 
     var initial_object={}; 
     initial_object['type']={} 
     for(var i=0;i<20;i++){ 
      if(i===0){ 
      initial_object['type'][i]="Building"; 
      } 
      else if(i===1){ 
      initial_object['type'][i]="Storage"; 
      } 
      else if(i===2){ 
      initial_object['type'][i]="Building size"; 
      } 
      else{ 
      initial_object['type'][i]="Component"; 
      } 
      this.setState(initial_object); 



     } 

    } 

渲染功能

render() 
    { 
     return (
       //clonable elements 
       <ul className="description-input"> 
        {Array(20).fill(1).map((el, i) => 
        <li > 
        <select name="type" onChange={this.setValue.bind(this, 'type',i)}> 
         <option value="Component">Component</option> 
         <option value="Building">Bulding</option> 
         <option value="Storage">Storage</option> 
         <option value="Building Size">Building size</option> 
        </select> 
        <div className={"int-input" +this.state.type[i]!='Building' ? 'hidden' :''}> 
         <input type="text" name="int_input" onChange={this.setValue.bind(this, 'int_input',i)}/> 
        </div> 

        </li> 
       )} 

       </ul> 


     ); 

我想預先定義的狀態，讓我可以預先加載一些具有默認值的表單元素。

我有錯誤Uncaught TypeError: Cannot read property 'type' of null

我要聲明類似下面這是給語法錯誤以及

this.state={ 
        type[0]:'Building', 
        type[1]:'Building', 
        type[2]:'Building', 
        type[3]:'Building', 
        type[4]:'Building', 
        type[5]:'Building', 
        type[6]:'Building', 
        type[7]:'Building', 
        type[8]:'Building', 
        type[9]:'Building', 


      } 

Answer 1

在構造函數中，你應該直接設置，而不是調用setState狀態：

this.state = {}; 

所以它會是：

class DescriptionComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    initial_object['type'] = {}; 
    for (var i = 0; i < 20; i++) { 
     if (i === 0) { 
     initial_object['type'][i] = 'Building'; 
     } else if (i === 1) { 
     initial_object['type'][i] = 'Storage'; 
     } else if (i === 2) { 
     initial_object['type'][i] = 'Building size'; 
     } else { 
     initial_object['type'][i] = 'Component'; 
     } 
    } 
    this.state = initial_object; 
    } 
} 

錯誤是說this.state未定義

---

如果你想直接設置它，那麼你將它寫成一個數組：

this.state = { 
    type: [ 
    'Building', 
    'Storage', 
    'Building size', 
    'Component', 
    'Component', 
    'Component' // etc.. 
    ] 
};