React中变量作为数组索引无法访问元素的问题求助

问题描述 #

在React项目中，使用变量作为数组索引访问元素时失败，但直接使用数字索引可正常访问，且已确认变量为数字类型。报错信息如下：

Error in /~/src/App.js (144:1)
listaProd[p] is undefined

相关代码 #

///要访问的数组：
const listaProd = [
  { name: 'Água..........', price: 2.5 },
  { name: 'Coca-cola.......', price: 6 },
  { name: 'Almoço executivo..', price: 25.5 },
  /////其他元素....
];

///需要列出的listaProd索引
const ar = [1, 2];

{ 
  ar.map((p, c) => {
    console.log('-', p);
    /**已确认p为数字1或2 */
    let index = parseInt(p);
    /**确保为数字类型 */
    return (
      <div className="pedido_client" key={c}>
        {/**-----可以正常工作--------*/}
        {listaProd[1].name}

        {/**无法工作 */}
        {listaProd[p].name}

        {/**无法工作 */}
        {listaProd[index].name}

        {/**无法工作 */}
        {listaProd.at(index).name}
      </div>
    );
  })
}

问题原因及解决方案 #

核心问题出在**listaProd数组的定义时机**：它被声明在组件渲染函数内部、ar.map逻辑之后。当ar.map执行时，listaProd还未完成定义，所以无论用变量还是转换后的索引都无法访问；而直接写listaProd[1].name时，因JSX的渲染特性，这部分代码会在组件后续渲染阶段执行，此时listaProd已存在，因此能正常显示。

解决方法：将listaProd的定义移到ar.map代码之前，确保使用数组时它已经初始化完成。

调整后的关键代码结构：

// 先定义数组，保证map执行时数组已存在
const listaProd = [
  { name: 'Água..........', price: 2.5 },
  { name: 'Coca-cola.......', price: 6 },
  { name: 'Almoço executivo..', price: 25.5 },
  /////其他元素....
];

const ar = [1, 2];

{ 
  ar.map((p, c) => {
    console.log('-', p);
    let index = parseInt(p);
    return (
      <div className="pedido_client" key={c}>
        {listaProd[p].name}
      </div>
    );
  })
}

修改后，变量索引即可正常访问数组元素。

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