ReactJS：数组元素设置key的最佳方式是什么？新手求助

嘿，刚入门React踩点小坑太正常了，咱们来捋捋你的代码问题在哪。你的代码逻辑其实没大毛病，但几个细节处理不当，大概率是导致你预期结果没出现的原因：

问题拆解 #

• React里props的命名惯例是小驼峰式，你组件里用props.Numbers虽然语法上跑通，但不符合行业规范，容易和组件名的大驼峰混淆；
• 你的Numbers数组里的元素是字符串类型（'2'、'4'这类），虽然JavaScript会自动把字符串转成数字做乘法，但这种隐式转换有时候会埋下意想不到的bug，最好显式处理更稳妥；

修正后的代码 #

import React from 'react';
import ReactDOM from 'react-dom';

// 直接把数组元素改成数字类型，从根源避免类型问题
const numbers = [2, 4, 6, 8];

const NumbersList = (props) => (
  <ul>
    {/* 改用小驼峰的props.numbers，语法更规范 */}
    {props.numbers.map(number => <li key={number}>{number * 2}</li>)}
  </ul>
);

// 传递props时也对应改用小驼峰
ReactDOM.render(<NumbersList numbers={numbers} />, document.getElementById('root'));

如果你不想修改原数组的类型（比如必须保留字符串格式的数字），那就在运算时显式转换类型：

{props.numbers.map(number => <li key={number}>{parseInt(number, 10) * 2}</li>)}

额外小提示 #

• 你用数组元素当key的做法没问题，因为这些元素都是唯一值，符合React对key的要求；
• 组件名用大驼峰（NumbersList）是完全符合规范的，这点你做对了👍

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