在ECMA6 / react上将对象数组定义为状态变量(Define array of object as state variables on ECMA6/react)

在ECMA6 / react上将对象数组定义为状态变量(Define array of object as state variables on ECMA6/react)

我试图使状态对象数组如下所示

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', }

I tried to make state object array as below

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); } }

The render function

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> );

I am trying to predefine the states so that I can pre load some form element with default values .

I got error Uncaught TypeError: Cannot read property 'type' of null

I want to declare something like below which is giving syntax error as well

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', }

最满意答案

在构造函数中，您应该直接设置状态而不是调用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.. ] };

In the constructor, you should set the state directly instead of calling setState:

this.state = {};

So it would be:

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

The error is saying that this.state is undefined

---

If you want to set it directly, then you would write it as an array:

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