推空數組反應的狀態

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