MUI组件报错：列表子元素需唯一key属性，已加key仍报错求助

你遇到的是React列表项缺少唯一key的警告，问题出在map循环里的key取值错误：

错误原因 #

你写的key={models.model_id}是在访问整个数组models的model_id属性，而不是当前循环的单个model对象的model_id，导致每个MenuItem的key值无效（要么是undefined，要么重复），触发了React的Warning: Each child in a list should have a unique "key" prop.警告。

修复代码 #

直接把models.model_id改成model.model_id即可，修正后的JSelect部分代码：

<JSelect
    label="Model"
    labelId="assembly_model_id"
    name="product_model_id"
    value={values.product_model_id}
    onBlur={handleBlur}
    onChange={handleChange}
    errors={errors}
>
    {models.map((model) => {
        return (
            <MenuItem key={model.model_id} value={model.model_id}>
                {model.model_code}
            </MenuItem>
        );
    })}
</JSelect>

额外说明 #

React要求列表中的每个子元素必须有唯一的key属性，这个key要绑定到当前迭代项的唯一标识（比如这里的model_id），不能用数组索引（除非列表不会新增、删除或排序），也不能误用外层的数组对象来取值。

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