如何从最后一个按钮获取 id 并使用 react-id-generator 在 React 中删除它

Question

所以在 React 中，我制作了一个按钮，每次单击它时，它都会使用 react-id-generator 生成一个具有唯一 ID 的新按钮。

现在我想从列表中的最后一个按钮获取 ID，每次单击删除按钮时它应该删除最后生成的按钮。

这是我到目前为止所做的，我试图删除最后一个按钮，但它删除了所有按钮：

import React, { Component } from 'react';
import Select, { components } from 'react-select';
import styles from '../styles/loginsignup.css'
import axios from 'axios'
import nextId from "react-id-generator";
export default class AccomodationInfo extends Component {

    constructor() {
        super();
        this.state = {
            accomcate: null,
            addroom: [''],
            isLoading: true,
        }
      }
  handleClick = event => {
        const htmlId = nextId("Room")
        event.preventDefault()
        this.setState({ addroom: [...this.state.addroom, htmlId] })
        }

    handleRemove = event => {
        event.preventDefault()
        this.setState({ addroom: [...""] })
    }



    render() {
        const{accomcate,  isLoading}  = this.state
        return(
            <div>
                <button onClick={this.handleClick}>Add</button>
                <button onClick={this.handleRemove}>Remove</button>
                <div>
                {this.state.addroom.map((addroom) => (
                <div>
                  <button id={addroom}>{addroom}</button>
                </div>
                ))}
              </div>
            </div>



        )


    }


}
}

有谁知道正确的做法吗？

Answer 1

你可以试试这个：

handleRemove = event => {
  event.preventDefault()
  console.log(this.state.addroom[-1])
  this.setState(state => state.addroom.pop())
}

这将删除列表中的最后一项。
您可以在状态上使用 pop() 的原因是通过传递 setState 一个函数而不是一个对象。该函数将先前的状态作为可以修改的参数传递，并替换不可变状态对象。

编辑： 我注意到您还想要已删除按钮的 ID，因此我更新了上面的代码示例以记录已删除按钮的 ID。

如何从最后一个按钮获取 id 并使用 react-id-generator 在 React 中删除它

How to get id from last button and remove it in React using react-id-generator

javascript

reactjs

react-native

mern