[英]push empty array into react's state
http://jsbin.com/zehoceloka/1/edit http://jsbin.com/zehoceloka/1/edit
my input number is dynamic, it depends on the API how many data it has.我的输入数字是动态的,这取决于 API 有多少数据。 So firstly I map it to the view.所以首先我将它映射到视图。 But there is also a feature where user can add new item.但还有一个功能,用户可以添加新项目。 I trying to push a new empty array, but nothing happens.我试图推送一个新的空数组,但没有任何反应。 Am I doing it wrong?我做错了吗?
class HelloWorldComponent extends React.Component {
constructor(){
super()
this.addNewRow = this.addNewRow.bind(this);
this.state = {
"rules":[
"age must be above 10",
"must wear shoe"
]
}
}
addNewRow(e){
const updated = this.state.rules.push("");
this.setState({rules:updated});
}
render() {
return (
<div>
{this.state.rules.map(obj =>
<input type="text" defaultValue={obj} />
)}
<button>Add New Rules</button>
<br /><br />
<pre>{JSON.stringify(this.state.rules,null,2)}</pre>
</div>
);
}
}
The objects in the state cannot be modify, you need to extract them, modify and then add again to the state:状态中的对象是不能修改的,需要提取出来,修改后再添加到状态中:
addNewRow(e){
let rules=this.state.rules.slice();
rules.push('');
this.setState({rules:rules});
}
You forgot to define the click event on button, use this:您忘记定义按钮上的点击事件,请使用:
<button onClick={this.addNewRow}>Add New Rules</button>
Few issues in this line:此行中的几个问题:
const updated = this.state.rules.push("");
1. Never mutate the state variable directly by this.state.a.push()
or this.state.a = ''
, always use setState
to update the value. 1.永远不要通过this.state.a.push()
或this.state.a = ''
直接改变状态变量,总是使用setState
来更新值。
2. a.push()
will not return the updated array
, it will return the value pushed into array. 2. a.push()
不会返回更新后的array
,它会返回推入数组的值。
Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made.永远不要直接改变 this.state,因为之后调用 setState() 可能会替换你所做的改变。 Treat this.state as if it were immutable.将 this.state 视为不可变的。
Check this working code:检查此工作代码:
class HelloWorldComponent extends React.Component { constructor(){ super() this.addNewRow = this.addNewRow.bind(this); this.state = { rules:[ "age must be above 10", "must wear shoe" ] } } addNewRow(e){ let updated = this.state.rules.slice(); updated.push(""); this.setState({rules:updated}); } render() { return ( <div> {this.state.rules.map(obj => <input type="text" defaultValue={obj} /> )} <button onClick={this.addNewRow}>Add New Rules</button> <br /><br /> <pre>{JSON.stringify(this.state.rules,null,2)}</pre> </div> ); } } ReactDOM.render( <HelloWorldComponent />, document.getElementById('react_example') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='react_example'/>
Please try like this:请尝试这样:
var arr = this.state.rules.slice();
arr.push("");
this.setState({ rules: arr });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.