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

【问题标题】：Why is my remove button not rendering properly in React?为什么我的删除按钮无法在 React 中正确呈现？
【发布时间】：2019-01-06 07:29:30
【问题描述】：

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

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

【问题讨论】：

我认为你应该提到什么是火，什么是数据库

标签： reactjs function firebase listview firebase-realtime-database

【解决方案1】：

看起来你的函数调用有问题，但你的方法只接受一个参数。

onClick={this.remove.bind(this, disc.id)}

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

【讨论】：