Question

我收到此警告：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

render() {
    const exercises = this.state.Exercises.map(exercise => {
      return (
        <View>
          <Text style={{ fontSize: 15 }}>Id: {exercise.Id} </Text>
          <Text style={{ fontSize: 15 }}>Ripetizioni: {exercise.Reps}</Text>
          <Text style={{ fontSize: 15 }}>Note: {exercise.Notes}</Text>
          <TouchableOpacity
            style={[styleButton.button, styleButton.buttonOK]}
            onPress={() => this.checkAttività(exercise.Id)}
          >

我该如何解决？

Answer 1

您应该将密钥传递给返回内容，例如：

    const exercises = this.state.Exercises.map(exercise => {
      return (
        <View key={`${exercise.Id}`}>
          <Text style={{ fontSize: 15 }}>Id: {exercise.Id} </Text>
          <Text style={{ fontSize: 15 }}>Ripetizioni: {exercise.Reps}</Text>
          <Text style={{ fontSize: 15 }}>Note: {exercise.Notes}</Text>
          <TouchableOpacity
            style={[styleButton.button, styleButton.buttonOK]}
            onPress={() => this.checkAttività(exercise.Id)}
          >
      )
    })

编辑：React期望键为字符串

Answer 2

您只需要将密钥添加到View

<View key={exercise.Id}>

Answer 3

错误消息很清楚。 React希望您为列表中的每个项目定义一个唯一的值，该值应作为key对象的View属性分配。

如果需要，您可以在地图循环中拉出索引并将其用作键：

const exercises = this.state.Exercises.map((exercise, index) => {
  return (
    <View key={`view-${index}`}>
...

请阅读下面的@JanosVinceller评论，并检查链接，这是一个很好的理由，请不要执行我在这里提出的建议。至少是要更改的列表。

每个孩子独特的“钥匙”道具

3 个答案: