Question

我已经映射了来自数据库的数据，而我却给出了从页面和数据库中删除该数据的按钮，这是行不通的。代码如下。

class View extends Component {


    constructor(props) {
        super(props);
        this.state={
            dealdata: [],

        }
    }
    componentDidMount(){
        axios.get('/getdeals')
        .then(res => {
          this.setState({ dealdata:res.data })
            console.log("recived deals : "+ this.state.dealdata);
            this.forceUpdate()
        })

      }
      deleteItem(e){
        console.log("ids"+e.target)
      }
    render(){
        return(
            <div>
                <Col xs="12" md="6">
                {this.state.data.map(item => (
            <Card color="light" className="cards">
            <CardBody>
              <label>{item.percentage}% Deal on {item.on}{item._id}</label>
              <Button size="sm" className="btn-facebook btn-brand icon mr-1 mb-1" ><span>EDIT</span></Button>&nbsp;&nbsp;
              <Button size="sm" className="btn-youtube btn-brand icon mr-1 mb-1" onClick={this.deleteItem.bind(this,item._id)} >DELETE</Button>

              </CardBody>
            </Card>

       ))}
      </Col>
            </div>
        )
    }
}
export default View

但运行此代码ID时未通过。

预先感谢

Answer 1

您正在事件处理程序中绑定id的值，因此它将用作事件处理程序功能的第一个参数，然后是事件对象。

这样写：

deleteItem(id, e){
   console.log("ids", id, e.target)
}

检查MDN Doc，了解有关绑定如何工作的更多信息。

工作示例：

class App extends React.Component {
  constructor() {
     super();
     this.state = { arr: [1,2,3,4] }
  }
  
  deleteItem(id, e) {
    console.log('id', id, e.target);
  }
  
  render() {
    return (
      <div>
        {
          this.state.arr.map(el => <div>
             {el}
             <button onClick={this.deleteItem.bind(this, el)}>
                Delete
             </button>
          </div>)
        }
      </div>
    )
  }  
}

ReactDOM.render(<App />, document.getElementById('app'))

<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='app'>

Answer 2

根据jsx中的顺序，它应具有e和id作为属性：

deleteItem(e, id){
   console.log("ids", id, e.target)
}

Answer 3

您的代码中有两个问题。

在其他答案中提到了第一个，您需要在id函数中同时使用event和deleteItem。

deleteItem(id, e) {
    console.log("ids", id, e.target);
}

第二个问题是您正在映射错误的状态值。您正在尝试this.state.data，但您有this.state.dealdata。

这是完整的代码：

从“ react”导入React；从“ react-dom”导入{render}；从“ ./Hello”导入Hello；从“ reactstrap”导入{Col，Card，CardBody，Button}；从“ axios”导入axios；

class View extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    dealdata: [],
  };
}

componentDidMount(){
        axios.get('/getdeals')
        .then(res => {
          this.setState({ dealdata:res.data })
            console.log("recived deals : "+ this.state.dealdata);
            this.forceUpdate()
        })

      }

deleteItem(id, e) {
  console.log("ids", id, e.target);
}
render() {
  return (
    <div>
      <Col xs="12" md="6">
        {this.state.dealdata.map(item => (
          <Card color="light" className="cards">
            <CardBody>
              <label>
                {item.percentage}% Deal on {item.on}
                {item._id}
              </label>
              <Button
                size="sm"
                className="btn-facebook btn-brand icon mr-1 mb-1"
              >
                <span>EDIT</span>
              </Button>&nbsp;&nbsp;
              <Button
                size="sm"
                className="btn-youtube btn-brand icon mr-1 mb-1"
                onClick={this.deleteItem.bind(this, item._id)}
              >
                DELETE
              </Button>
            </CardBody>
          </Card>
        ))}
      </Col>
    </div>
  );
}
}

此外，您在这里不需要forceUpdate，为什么要使用它？您已经在设置状态，因此您的组件将被重新渲染。还有一点不要在设置状态后立即使用console.log查看状态。 setState是一个异步操作，您无法获得这样的健康结果。将其记录在渲染方法中，或将回调与setState一起使用：

this.setState({ dealdata:res.data }, () => console.log(this.state.dealdata) );

最后，我建议为每个项目重构一个Item组件。使用当前代码，您可以直接在JSX prop中绑定函数。每次渲染此组件时都会重新创建这些功能。对于小型应用程序而言，这不是问题，但是对于大型应用程序而言，可以看到性能问题。创建一个新组件，将其映射，将每个项目传递给它，然后使用回调函数处理您的delete或其他操作。由于您将拥有_id个，因此您可以将其传回，并在您的父级组件（视图）中执行其他工作。

Answer 4

按钮代码更改为：-

<Button size="sm" className="btn-youtube btn-brand icon mr-1 mb-1" onClick={this.deleteItem} value={item._id} >DELETE</Button>

和事件处理更改为：-

 deleteItem(e){
        console.log("ids"+e.target.value)
     }

现在它正在工作..感谢所有帮助我的人...

如何通过在Reactjs中获取ID来删除映射数据

4 个答案: