React中点击按钮用useState存储后端PM_id的问题求助

你的代码存在两个核心问题，导致点击按钮后控制台输出undefined：

1. useState更新写法错误 #

你当前的setstoreid(...storeid,[PM_id])写法不符合React数组类型state的更新规范，而且setState是异步操作，直接依赖当前storeid的值会导致拿到旧的state数据。正确的数组更新应该使用函数式更新，确保获取到最新的state快照。

2. state访问逻辑错误 #

你存入storeid的是PM_id本身（比如数字/字符串类型的ID值），不是包含PM_id属性的对象，所以storeid[0]?.PM_id自然会返回undefined——直接访问storeid[0]就能拿到你需要的ID。

修正后的完整代码 #

import React, { useEffect, useState } from 'react'
import { NavLink } from 'react-router-dom' // 确保导入NavLink（如果使用react-router）

const Contractor = () => {
  const [storeid, setstoreid] = useState([])

  const getmemberidatte = (PM_id) => {
    // 函数式更新，基于最新state添加新ID
    setstoreid(prevState => [...prevState, PM_id])
  }

  // 监听storeid变化，更新完成后再打印/处理数据
  useEffect(() => {
    if (storeid.length > 0) {
      console.log(storeid[0]) // 直接获取第一个ID，无需.PM_id
      // 如果需要调用takeattendanceonbutton，也可以放在这里
      // takeattendanceonbutton()
    }
  }, [storeid])

  return (
    <>
      <ol className="list-group list-group-numbered mt-4">
        {smember.map((item, i) => (
          <li key={i} className="list-group-item d-flex justify-content-between align-items-start">
            <div className="ms-2 me-auto">
              <NavLink onClick={() => getmemberid(item.PM_id)} className="text-decoration-none">
                <div className="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

额外说明 #

• 如果你的需求是每次点击只保存当前PM_id（覆盖之前的数组），而非累加ID，只需把setstoreid改成：

  setstoreid([PM_id])
  

• 永远不要在setState之后立刻打印当前state——因为setState是异步的，此时打印的还是更新前的旧值，必须通过useEffect监听state变化来处理后续逻辑。

内容的提问来源于stack exchange，提问作者user20658000