推空数组反应的状态

Question

http://jsbin.com/zehoceloka/1/edit

我输入的数量是动态的，这取决于有多少数据具有API。所以首先我将它映射到视图。但也有一个功能，用户可以添加新项目。我试图推新的空阵列，但没有任何反应。我做错了吗？

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

Answer 1

你忘了定义按钮单击事件，使用此：

<button onClick={this.addNewRow}>Add New Rules</button> 

在此行中很少有什么问题：

const updated = this.state.rules.push(""); 

1. 不要直接通过this.state.a.push()或this.state.a = ''直接更改状态变量，始终使用setState更新该值。

2. a.push()不会返回更新的array，它会返回推入数组的值。

从Doc：

决不变异this.state直接，如调用的setState（）之后可能 代替您作出的突变。对待这个状态，就好像它是不可变的 。

检查该工作代码：

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'/>

Answer 2

的状态不能被修改的对象，您需要解压缩，修改，然后重新添加到状态：

addNewRow(e){ 
    let rules=this.state.rules.slice(); 
    rules.push(''); 
    this.setState({rules:rules}); 
} 

Answer 3

请尝试这样的：

var arr = this.state.rules.slice(); 
arr.push(""); 
this.setState({ rules: arr });