javascript - 将对象数组定义为 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..
  ]
};