как передать значение ответа API в функцию onclick

Question

когда я щелкаю listgroup.item, я хочу, чтобы идентификатор пользователя был передан функции onclick, получаю значение как неопределенное. деталь пользователя. любые решения заранее спасибо

import React, { Component } from 'react'
import axios from 'axios'
import ListGroup from 'react-bootstrap/ListGroup';

 class ViewUsers extends Component {
    constructor(props) {
        super(props)

        this.state = {
             User:[],
             error:[],
             Id:0

        }
        this.handleclick = this.handleclick.bind(this)
    }
    handleclick = (User) => {
        this.setState({
            Id:User.userid
        })
        this.props.history.push('/Viewuserbyid')
        console.log(this.Id);
    }
    componentDidMount(){
        const header ={
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        }
        axios.post('https://localhost:/api/getallusers',{
            header:header
        })
        .then(res => { 
            console.log(res)
            this.setState({
                User:res.data
            })
        })
        .catch(Error =>{
            this.setState({
                error:'Error retriving data'
            })
            console.log(Error)
        })
    }
    render() {
        const {User,error} = this.state;
        return (
            <div style={{height:"100%"}}> 
                {/* onChange={(event)=>this.setState({keyword:event.target.value})} */}
          <input type="text" placeholder="search" className="form-control form-control-sm"  />
          <button>search</button>
           {
               User.length ? User.map(User => (
               <ListGroup key={User.userid}>
                   <ListGroup.Item onClick={this.handleclick.bind(this,User.userid)}>
                       Name : {User.name} <br/> AccountNumber : {User.accountNumber}
                   </ListGroup.Item>
               </ListGroup >) : null
           }
           {
                error ? <div>{error}</div> : null
           }

            </div>
        )
    }
}

export default ViewUsers

Answer 1

Будет ли это работать?

<ListGroup.Item onClick={() => this.handleclick(User.userid)}>

И, возможно, использовать это в обработчике кликов:

handleclick = (User) => {
    this.setState({
        Id:User.userid,
        // might want to update User also by uncommenting the next line
        // User,
    }, () => {
        console.log(this.state.Id)
        console.log(this.state.User)
    })
    this.props.history.push('/Viewuserbyid')
}

Answer 2

Попробуйте с onClick = {() => {this.handleclick (user.userid)}} и handleclick = id => {this.setstate ({id: id}))}