警告：flattenChildren (...) 遇到两个具有相同键的孩子 - 反应原生

Question

render(){
    const { List: list } = this.state.data
  const renderList = list && list.map(({date, time, minute}) => {
    return (
      <View key={date+time+minute}>
        <Text>date:{date}</Text>
        <Text>time:{time}</Text>
        <Text>minute:{minute}</Text>
        <Text> ***** </Text>
      </View>
    )
  })
        return(
            <View>
                <TouchableHighlight onPress={this._onPressButtonPOST}>
                    <Text>Add</Text> 
                </TouchableHighlight>

            <TouchableOpacity style= {{left:300,top:-20, }}
 onPress={()=>{ this.setState({ shouldShow: !this.state.shouldShow })}}
><Text>Edit</Text></TouchableOpacity>

{this.state.shouldShow ? <TextInput placeholder='time' 
            onChangeText={(text) => this.setState({textinput: text})}
           /> : null}
{this.state.shouldShow ? <TextInput placeholder='minute' 
            onChangeText={(text) => this.setState({textinput: text})}
           /> : null}
{this.state.shouldShow ? <TextInput placeholder='date' 
            onChangeText={(text) => this.setState({textinput: text})}
           /> : null}

                 <TouchableHighlight onPress={this._onPressButtonGET.bind(this)}>
                    <Text>show</Text>
                   </TouchableHighlight>

                 {renderList}



            </View>
        );
    }

我收到类似“警告：flattenChildren (...) 遇到两个具有相同密钥的孩子”的警告，我正在使用 Web 服务，为什么会出现此警告，我该如何解决？

Answer 1

通过给您的孩子唯一的钥匙。一种方法是添加来自map 的索引：

const renderList = list && list.map(({date, time, minute}, index) => { // ***
    return (
        <View key={date+time+minute+index}>                            // ***
            <Text>date:{date}</Text>
            <Text>time:{time}</Text>
            <Text>minute:{minute}</Text>
            <Text> ***** </Text>
        </View>
    );
});

或者只使用index 而不使用其他人：

const renderList = list && list.map(({date, time, minute}, index) => { // ***
    return (
        <View key={index}>                                             // ***
            <Text>date:{date}</Text>
            <Text>time:{time}</Text>
            <Text>minute:{minute}</Text>
            <Text> ***** </Text>
        </View>
    );
});