Question

当我单击特定项目中的删除按钮时，它将删除项目列表中的最后一个元素。在删除项目之前，我使用了一个弹出屏幕（模式），此后它无法正常工作。请在下面找到修改后的代码。随附示例图像。当我按下关闭按钮时，最后一个元素被删除，而不是那个元素。这是商品的代码：

<tbody>
                            {this.state.dishes ? this.state.dishes.map( (dish) =>
                                <tr class="row100 body" key={dish.id}>
                                    <td class="cell100 column2">{dish.Vendor}</td>
                                    <td class="cell100 column2">{dish.Dish}</td>
                                    <td class="cell100 column3">{dish.Price}</td>
                  <td class="cell100 column1">{dish.Days}</td>
                                    <td class="cell100 column4"><div className="test"><img className='close' onClick={this.onOpenModal} src={ require('./close.png') } />
                                    <Modal open={this.state.open} onClose={this.onCloseModal} showCloseIcon={false} center >
                                        <h2 className='modbtn'>Are you sure you want to remove this dish?</h2>
                                        <Button className="addmenu" onClick={this.remove.bind(this, dish.id)}>Yes</Button>
                                        <Button className="addmenu" onClick={this.onCloseModal}>No</Button>
                                        </Modal>
                                    </div></td>
                                </tr>) : (null) }                               
                            </tbody>

功能可以在下面找到：

onOpenModal = () => {
        this.setState({ open: true });
      };
      onCloseModal = () => {
        this.setState({ open: false });
      };
addMessage(e){
        e.preventDefault()

        var newData={
        Vendor: this.inputE3.value,
        Dish: this.inputEl.value,
        Price : this.inputE2.value,
        Days : this.state.days
        }

        fire.database().ref('dishes').push(newData);

      this.inputEl.value = ''; 
      this.inputE2.value = ''; 
      this.inputE3.value = ''; 
      } 
      remove(id){
        // console.log(this.state)
        let a = fire.database().ref('dishes/'+id)
        a.remove()
        this.onCloseModal()
      }

Answer 1

函数调用看起来像问题，但是您的方法仅接受一个参数。

onClick = {this.remove.bind（ this，dish.id ）}

所有Firebase数据库操作都是异步的，如果您使用promise处理它，那将是很好的。

为什么我的删除按钮在React中无法正确呈现？

1 个答案: