將對象數組定義為ECMA6 / react上的狀態變量

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..
  ]
};