我该如何解决这个警告？ "Encountered Two Children with the same key, `./.`"

Question

我正在使用导入“react-native-form-select-picker”在我的 React 本机应用程序中进行 select 输入，并且代码工作正常但它仍然给我一个警告“遇到两个 Children 使用相同的键，`.$1/.$2"。那么我该如何解决这个问题有人可以帮忙吗？下面是我的代码行：

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, } from 'react-native';
import SelectPicker from 'react-native-form-select-picker';

const options = ["Aadhar Card", "Bank Passbook", "Driving Licence", "Pan Card"];

// create a component
const UpdateDocument = ({ navigation }) => {

    const [selected, setSelected] = useState();

    return (
        <View style={styles.container}>
            <View style={styles.docBox}>
                <SelectPicker
                    placeholder="Select document to Update"
                    style={styles.selectBox}
                    onValueChange={(value) => {
                        // Do anything you want with the value. 
                        // For example, save in state.
                        setSelected(value);
                    }}
                    selected={selected}
                >

                    {Object.values(options).map((val, index) => (
                        <SelectPicker.Item label={val} value={val} key={} />
                    ))}

                </SelectPicker>
            </View>
        </View>
    );
};

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    docBox: {
        paddingVertical: 10,
        paddingHorizontal: 10,
        borderBottomColor: '#aaa',
        borderBottomWidth: 1,
    },
    selectBox: { borderColor: '#555', borderWidth: 1, borderRadius: 4, }
});

//make this component available to the app
export default UpdateDocument;

Answer 1

键帮助 React 识别哪些项目已更改、添加或删除。这就是为什么 React 希望您在遍历 objects 列表以呈现多个 JSX 元素时为每个元素添加唯一键。 如果你省略键，列表中的项目不会获得稳定的标识，React 会在控制台中对你大喊：警告：列表中的每个 child 都应该有一个唯一的“关键”道具

因此，如果您在选项 lst 中的每个选项都是唯一的，那么您就可以这样做。

{Object.values(options).map((val, index) => (
                        <SelectPicker.Item label={val} value={val} key={val} />
                    ))}

我该如何解决这个警告？ "Encountered Two Children with the same key, `./.`"

How can I resolve this warning ? "Encountered Two Children with the same key, `.$1/.$2`"

javascript

arrays

unique-key

react-native