每当我回到主屏幕时,都会遇到此错误,并尝试了所有操作,因为我读到此错误与“平面列表”有关,所以我尝试更改keyExtractor = {(item,index)=> index.toString()},但它也不起作用。
How I can fix the following error: Encountered two children with the same key, %s
. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.%s
这是我的代码。
render()
const chart_wh = 200
const series = [18, this.state.totalleavestaken]
const sliceColor = ['#58508d', '#ffa600']
return (
<Block style={styles.container}>
<NavigationEvents
onDidFocus={() => this.refreshfunction()}
/>
<StatusBar
barStyle="dark-content"
hidden={false}
translucent={true}
networkActivityIndicatorVisible={true}
/>
<Block row style={styles.profile}>
<Text style={styles.heading} >{this.state.wishes} , </Text>
<Text style={styles.heading} >{this.state.email}</Text>
</Block>
<View style={styles.leavesGraph}>
<View style={styles.leavesAccured}>
<Text style={styles.totalleavetext}>Total Leaves</Text>
<Text style={styles.number}>18</Text>
</View>
<View style={styles.leavesUsed}>
<Text style={styles.takenleavetext}>Leaves Used</Text>
<Text style={styles.number}>{this.state.totalleavestaken}</Text>
</View>
</View>
<Block style={styles.box}>
<Block center style={styles.pie1}>
<PieChart
chart_wh={chart_wh}
series={series}
sliceColor={sliceColor}
doughnut={true}
coverRadius={0.85}
/>
</Block>
</Block>
<View style={styles.elapseLeave}>
<Text style={styles.paragraph}>{this.state.leavesleft} left out of 18</Text>
</View>
<Text style={styles.requestCaption}>Leave Request</Text>
<FlatList
style={styles.list}
extraData={this.state}
data={this.state.response}
numColumns={5}
renderItem={({ item , index }) => (
<View style={styles.leavesdetail}>
<View style={styles.leaveRequestSection}>
<Text style={styles.leaveRequestsCaption} key={index}>
{item.A}</Text>
<Text style={styles.leaveRequests} key={index} >Number of days: {item.B}</Text>
</View>
<View style={styles.leavesUsed}>
{this.leavesstatusrender(item.C)}
</View>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
</Block>
);
}