Question

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

document.onload = function ...

Answer 1

状态中的对象无法修改，需要提取，修改然后再次添加到状态：

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

Answer 2

您忘了在按钮上定义点击事件，请使用：

<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（）可能替换你所做的突变。把它当作状态对待不可变的。

检查此工作代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

请尝试这样：

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

将空数组推入react的状态

3 个答案: