Question

我有一个用户详细信息列表，因为对于父容器，我给了<View key={details.id}>一个唯一的列表。但是我加载的页面总是抛出Warning: Each child in a list should have a unique "key" prop.。 TextInput字段也是不可编辑的。哪里出错了。请查看我的代码。

{this.state.profileDetails.map(details => {
                            return (
                                <View key={details.id}>
                                    <Text style={{textAlign: 'center'}}>
                                        <Image
                                            style={styles.imageCircle}
                                            source={require('../../../../assets/sample.jpeg')}
                                        />
                                    </Text>
                                    <View>
                                        <Text style={{marginBottom: 5}}>First Name:</Text>
                                        <TextInput
                                            style={styles.textEdit}
                                            value={details.first_name}
                                            onChangeText={(text) => this.setState({first_name:text})}
                                        />
                                        <Text style={{marginBottom: 5}}>Last Name:</Text>
                                        <TextInput
                                            style={styles.textEdit}
                                            value={details.last_name}
                                        />
                                        <Text style={{marginBottom: 5}}>Title:</Text>
                                        <TextInput
                                            style={styles.textEdit}
                                            value={details.designation}
                                        />
                                        <Text style={{marginBottom: 5}}>Firm:</Text>
                                        <TextInput
                                            style={styles.textEdit}
                                            value={details.firm}
                                        />
                                        <Text style={{marginBottom: 5}}>Email Address:</Text>
                                        <TextInput
                                            style={styles.textEdit}
                                            value={details.email}
                                        />
                                        <Text style={{marginBottom: 5}}>Work Number:</Text>
                                        <TextInput
                                            style={styles.textEdit}
                                            value={details.work_number}
                                        />
                                        <Text style={{marginBottom: 5}}>Cell Number:</Text>
                                        <TextInput
                                            style={styles.textEdit}
                                            value={details.cell_number}
                                        />
                                        <Text style={{marginBottom: 5}}>LinkedIn Profile:</Text>
                                        <TextInput
                                            style={styles.textEdit}
                                            value={details.linkedin_profile}
                                        />
                                        <Text style={{marginBottom: 5}}>Summary:</Text>
                                        <TextInput
                                            multiline={true}
                                            numberOfLines={4}
                                            style={styles.textEdit}
                                            value={details.about}
                                        />
                                    </View>
                                </View>
                            )
                        })}

是否有任何解决方案可以绕过此问题。请引导我。

Answer 1

最有可能您的详细信息可能没有id字段，由于该字段每次获得未定义的值并重复遍历其他子项时，快速解决方法可能是使用map给出的索引作为第二个参数

[]。map（（currentValue，index）=> {}）;

关于TextField，看到您没有告诉TextField组件在用户进行编辑以更改其值时执行某些操作，原因是该值未更新，因此弹出了旧值，这使其看起来不可编辑，请参阅文档以查看所需的道具，https://facebook.github.io/react-native/docs/textinput.html

Answer 2

尝试使用数组索引作为键

{this.state.profileDetails.map((details, index) => //... )}

但是请记住，如果物料顺序频繁变化，这并不是最佳的性能。我仍然建议尝试使像id这样的唯一标识符起作用，并改用它们。

https://reactjs.org/docs/lists-and-keys.html#keys

列表中的每个孩子都应该有一个唯一的“键”道具，以应对<View>无法正常工作

2 个答案: