如何使用reactjs中的useState在按钮点击时存储来自后端的id？

fdbelqdn 于 2023-01-30 发布在 React

关注(0)|答案(1)|浏览(150)

我正在MERN项目中工作，我想在按钮点击时存储PM_id，并将PM_id存储在useState中，稍后我想从useState中获取PM_id。

- 我试过这个solution，但它不适合我**
- 我的密码**

import React, { useEffect, useState } from 'react'
const [storeid,setstoreid] = useState([])
 const getmemberidatte = (PM_id)=>{
        setstoreid(...storeid,[PM_id])
        console.log(storeid[0]?.PM_id);

    }

  return (
        <>
 <ol class="list-group list-group-numbered mt-4 ">

                                            {
                                                smember.map((item, i) => (

                                                    <li class="list-group-item d-flex justify-content-between align-items-start">
                                                        <div class="ms-2 me-auto">

                                                            <NavLink onClick={() => { getmemberid(item.PM_id) }} className="text-decoration-none"><div class="fw-bold">{item.member}</div></NavLink>

                                                        </div>
                                                        <button  onClick={()=>{ getmemberidatte(item.PM_id)}} className='btn btn-success me-3'>P</button>
                                                        <button className='btn btn-danger '>A</button>
                                                    </li>
                                                ))
                                            }
                                        </ol>
        </>
    )
}

export default Contractor

- 在控制台中，我得到undefined。代码的主要部分是<button onClick={()=>{ getmemberidatte(item.PM_id);takeattendanceonbutton()}} className='btn btn-success me-3'>P</button>**
- 请建议我如何获取ID？**

reactjs

来源：https://stackoverflow.com/questions/75245209/how-to-store-id-from-backend-on-button-click-using-usestate-in-reactjs

1条答案

按热度按时间

piztneat1#

你的代码中有几个问题。首先，你设置了错误的状态。设置数组状态的正确方法是：

setstoreid([...storeid, PM_id]);

或者更一般地说：

setstoreid((prev) => [...prev, PM_id]);

另外，您在调用setstoreid之后立即调用console.log，这意味着在您尝试调用它之前，状态没有时间更新，因此显示的值总是落后一个。您可以使用useEffect并将storeid作为依赖项来解决此问题。

useEffect(() => {
    console.log(storeid);
}, [storeid]);

这样console.log将只在storeid更新后运行。现在，由于您的函数所做的只是调用setstoreid，因此您可以跳过一个步骤并删除函数，这意味着您的按钮将是：

<button onClick={() => setstoreid([...storeid, item.PM_id])} className='btn btn-success me-3'>P</button>

赞(0）回复(0）举报 2023-01-30

我来回答

如何使用reactjs中的useState在按钮点击时存储来自后端的id？

1条答案

相关问题

热门标签

最新问答