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>
        );
    }

我收到警告，例如＆＃34;警告：flattenChildren（...）遇到两个孩子用相同的键＆＃34;，我正在使用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>
    );
});

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

1 个答案: