数组或迭代器中的每个子代都应具有唯一的键道具-但我确实定义了一个键道具

时间:2018-07-14 02:44:30

标签: javascript reactjs react-native

我确定了一个关键道具。仍然反应本地人抛出此警告: 数组或迭代器中的每个子代都应具有唯一的键道具

            <MapView
                style={styles.map}
            >
                {
                    locations.map((location)=> {
                        if (renderArray[wertwert]){
                            let content;
                            if (location.isARealTimeGPS) {
                                content = <View style={styles.marker}/>
                            } else {
                                content = <LocationInfoComponent location={location} handleLocationClick={this.handleLocationClick}
                                                               locations={locations} infoVisible={infoVisible}
                                />
                            }

                            wertwert = wertwert+1;
                            return (
                                <MapView.Marker
                                    key={JSON.stringify(location.latitude)}
                                    coordinate={location}
                                >
                                    {content}
                                </MapView.Marker>
                            )
                        } else {
                            wertwert = wertwert+1;
                        }
                    })
                }
            </MapView>

2 个答案:

答案 0 :(得分:1)

我建议您只使用简单的map-index而不是其他任何东西

        <MapView>
            {
                locations.map((location, index)=> {
                    ...
                        return (
                            <MapView.Marker
                                key={index}
                                coordinate={location}
                            >
                                {content}
                            </MapView.Marker>
                        )
                })
            }
        </MapView>

答案 1 :(得分:0)

我不确定JSON.stringify(location.latitude)是否返回唯一值。

因此,另一种方法是在迭代器函数中稍作调整,例如,使用map时,还可以传递可选参数,该参数始终是唯一的(数组中正在处理的当前元素的索引。)从0迭代到数组的长度可能是多少。 arr.map((item,index) => {})

<MapView
            style={styles.map}
        >
            {
                // use optional argument (id) as unique value
                locations.map((location,id)=> {
                    if (renderArray[wertwert]){
                        let content;
                        if (location.isARealTimeGPS) {
                            content = <View style={styles.marker}/>
                        } else {
                            content = <LocationInfoComponent location={location} handleLocationClick={this.handleLocationClick}
                                                           locations={locations} infoVisible={infoVisible}
                            />
                        }

                        wertwert = wertwert+1;
                        return (
                            {/* use "id" as a unique value */}
                            <MapView.Marker
                                key={id}
                                coordinate={location}
                            >
                                {content}
                            </MapView.Marker>
                        )
                    } else {
                        wertwert = wertwert+1;
                    }
                })
            }
        </MapView>