Question

我的状态：

this.state = { inputs: ['0'] }

在我的渲染中：

   {this.state.inputs.map((input, i) =>     <Travel formName={FORM_NAME} number={input}/>)}
    <button onClick={ () => this.appendInput() }> CLICK ME TO ADD AN INPUT   </button>
    <button onClick={ () => this.deleteInput() }>  Delete   </button>

现在，当我点击 this.appendInput() 时，我会添加一个这样的字段：

  appendInput() {
    var newInput = `${this.state.inputs.length}`;
    console.log("`${this.state.inputs.length}`" , `${this.state.inputs.length}`)
    this.setState(prevState => ({ inputs: prevState.inputs.concat([newInput]) }));
    console.log("this.state.inputs add ", this.state.inputs)
    this.forceUpdate();
}

但是我不明白我如何处理deleteInput，如何以这种方式删除最后一个字段？

编辑：我试过这样：

deleteInput(){
  var newInput = this.state.inputs.pop();
  this.setState( ({ inputs: newInput }));
  this.forceUpdate();
}

但后来我收到了消息：

<块引用>

_this.state.inputs.map

Answer 1

像这样编写你的删除函数，你从数组中分配弹出的数据。

deleteInput(){
  var newInput = [...this.state.inputs];
  newInput.pop();
  this.setState( ({ inputs: newInput }));
  this.forceUpdate();
}

Answer 2

pop() 将返回您不想将状态设置为的已删除元素。这样做会将您的状态设置为刚刚删除的单个元素。这就是导致您出错的原因，因为您试图在不是列表的对象上调用 map()。

相反，您的 deleteInput() 应该这样做：

this.setState(state => state.inputs.slice(0,-1))

这将从您的状态中正确删除输入数组的最后一个元素。

另外，作为旁注，调用 setState() 会自动将重新渲染排队，因此调用 this.forceUpdate() 是不必要且效率低下的。

Answer 3

您应该能够使用 .pop() 删除输入数组中的最后一项

这个线程有一些关于 pop 和 slice 的更详细的答案：Remove last item from array

React.JS：动态添加和删除字段

3 个答案: