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

Posted 2023-05-07

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

【英文标题】：warning: flattenChildren (...) Encountered two children with same key - react native

【发布时间】：2017-08-08 18:17:54

【问题描述】：

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 服务，为什么会出现此警告，我该如何解决？

【参考方案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>
    );
);

【讨论】：

非常感谢@T.J.crowder，第一个对我不起作用，但第二个工作完美。