JavaScript中如何从Redux selector返回的对象中正确获取usd字段数值

错误原因 #

• 变量作用域与渲染逻辑问题：你在组件顶层声明的coinValuesEnt、coinValuesVal是普通let变量，仅在useEffect内部更新赋值，一方面这类普通变量的更新不会触发组件重渲染，另一方面组件首次渲染时这两个变量还是初始的空数组，此时你访问coinValuesVal[0]本身就是undefined，后续调用.usd自然会报错。
• 取值写法本身逻辑错误：
  • coinValuesVal[0][0]：coinValuesVal的元素是{usd: 0.214749}这类对象，不是数组，调用[0]取值不存在
  • coinValuesEnt.usd：coinValuesEnt是数组，没有usd这个属性
  • coinValuesEnt[1]：coinValuesEnt的第一个元素才是zynecoin对应的数据项，索引是0而非1，且单个数据项是[币种名, 价格对象]结构的数组，需要先取索引1才能拿到价格对象。

正确实现方式 #

不需要额外声明两个数组处理，直接基于coinSelector取值即可，同时加可选链做兜底，避免初始状态为undefined时报错：

<h3>
  Price: {coinSelector?.zynecoin?.usd || ''}
</h3>

如果你的币种名是动态的（和props.coinText对应），可以用动态属性取值：

<h3>
  Price: {coinSelector?.[props.coinText.toLowerCase()]?.usd || ''}
</h3>

如果一定要用Object.values的写法，也可以直接在JSX里计算，不要依赖useEffect里赋值的变量：

<h3>
  Price: {Object.values(coinSelector || {})?.[0]?.usd || ''}
</h3>

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