Javascript 如何将api响应值传递给onclick函数

当我单击listgroup.item时，我希望用户ID被传递到onclick函数，我得到的值是未定义的。如果我在handleclick中得到该值，我将把该值作为道具传递给另一个组件，并获得用户的完整详细信息。 任何解决方案，请提前感谢

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

import React，{Component}来自“React”
从“axios”导入axios
从“react bootstrap/ListGroup”导入列表组；
类ViewUsers扩展组件{
建造师（道具）{
超级（道具）
此.state={
用户：[]，
错误：[]，
身份证号码：0
}
this.handleclick=this.handleclick.bind（this）
}
handleclick=（用户）=>{
这是我的国家({
Id:User.userid
})
this.props.history.push（“/Viewuserbyid”）
console.log（this.Id）；
}
componentDidMount（）{
常数头={
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
}
轴心柱https://localhost:/api/getallusers',{
标题：标题
})
.然后（res=>{
console.log（res）
这是我的国家({
用户：res.data
})
})
.catch（错误=>{
这是我的国家({
错误：“检索数据时出错”
})
console.log（错误）
})
}
render（）{
const{User，error}=this.state；
返回(
{/*onChange={（事件）=>this.setState（{关键字：event.target.value}）}*/}
搜索
{
User.length？User.map（用户=>(
名称：{User.Name}
AccountNumber:{User.AccountNumber}
)：null
}
{
错误？{error}：null
}
)
}
}
导出默认视图用户

这行吗

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

尝试使用onClick={（）=>{this.handleclick（user.userid）}}和handleclick=id=>{ this.setstate（{id:id}）

---

}

好的，我可以传递值，但无法在状态中设置。您可以澄清这个问题吗？如果您正在使用

console.log（this.Id）；

检查状态，它将不起作用。您需要

console.log（this.state.Id）

，并且需要在状态更新后记录它：

this.setState（{Id:User.userid}，（）=>console.log（this.state.Id））

是的，我更改了该行，正如您所说，状态值没有更新为userid值，它仍然处于0状态，但如果我在setstate之前记录控制台日志，我会在那里获得api值。无法设置状态检查函数handleclick before setstate中的id值，以了解您是否接收到正确的id。我希望

this.props.history.push（'/Viewuserbyid'）

不会导致此组件卸载。如果立即卸载，则更新状态没有意义。

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