React中获取buyerInfo._id返回undefined的问题求助

问题原因 #

1. 初始渲染时机问题：itemName的useState初始值仅在组件首次渲染时计算一次，此时buyerInfo还是你设置的初始空数组[]，数组没有_id属性，所以buyerId会是undefined。
2. 状态未联动更新：当useEffect里的接口请求完成、buyerInfo更新后，itemName不会自动同步更新，因为它没有监听buyerInfo的变化。

另外还有个小细节：接口返回的应该是单个用户对象，但你把buyerInfo的初始值设成了数组[]，建议改成空对象{}，避免后续属性读取逻辑混乱。

解决方案 #

方案一：点击时直接生成最新对象（推荐，无需额外状态）

如果itemName只在点击时使用，没必要存成状态，直接在handleClick里基于最新的buyerInfo生成即可：

const [buyerInfo, setBuyerInfo] = useState({}) // 初始值改成对象
useEffect(() =>{
  const getBuyer = async () =>{
    const res = await publicRequest.get(`/users/studentId/${buyer_id}`)
    setBuyerInfo(res.data)   
  }
  getBuyer()
},[product_id, seller_id, buyer_id])

const handleClick = (e) =>{
  e.preventDefault()
  // 每次点击取最新的状态值生成对象
  const currentItem = {
    productId: product_id,
    buyerId: buyerInfo._id,
    sellerId: seller_id
  }
  console.log(currentItem)
}

方案二：联动更新itemName状态（若需在其他场景使用该状态）

如果itemName需要在组件其他地方用到，就用useEffect监听相关状态变化，同步更新itemName：

const [buyerInfo, setBuyerInfo] = useState({})
const [itemName, setItemName] = useState({
  productId: product_id,
  buyerId: undefined,
  sellerId: seller_id
})

useEffect(() =>{
  const getBuyer = async () =>{
    const res = await publicRequest.get(`/users/studentId/${buyer_id}`)
    setBuyerInfo(res.data)   
  }
  getBuyer()
},[product_id, seller_id, buyer_id])

// 监听buyerInfo、product_id、seller_id的变化，同步更新itemName
useEffect(() => {
  setItemName(prev => ({
    ...prev,
    productId: product_id,
    buyerId: buyerInfo._id,
    sellerId: seller_id
  }))
}, [buyerInfo, product_id, seller_id])

const handleClick = (e) =>{
  e.preventDefault()
  console.log(itemName)
}

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