javascript - 如何映射单选按钮并检索不重复的值

Question

我使用库react-native-flexi-radio-button，在使用map()时遇到问题

我尝试填充 map 项的值()

  _mapDuration() {
    if (this.props.childList) {
      return this.props.childList.map((item, i) => <RadioGroup
        size={24}
        thickness={1}
        color="#FF9F4D"
        highlightColor="#fff5ed"
        selectedIndex={null}
        onSelect={(index, value) =>
          this.onSelectService(index, value)
        }
        style={{ marginTop: 10 }}
      >
        <RadioButton
          value={item.duration}
          color="#FF9F4D"
          style={{ alignItems: 'center' }}
        >
          <View style={styles.line}>
            <View
              style={{
                flexDirection: 'row',
              }}
            >
              <Text style={styles.textChoice}>{item.duration} Menit</Text>
              <Text style={styles.textSubCOD}>
                {/* ( 1 jam ) */}
              </Text>
              <Text style={styles.textUang}> Rp {item.price} </Text>
            </View>
          </View>
        </RadioButton>
      </RadioGroup>

      )
    }
  }

我想获取值和单选功能，而无需重复的单选按钮

Answer 1

使用键值来解决。并添加括号。

  _mapDuration() {
    if (this.props.childList) {
      return this.props.childList.map((item, i) => (<RadioGroup
        size={24}
        thickness={1}
        color="#FF9F4D"
        highlightColor="#fff5ed"
        selectedIndex={null}
        onSelect={(index, value) =>
          this.onSelectService(index, value)
        }
        style={{ marginTop: 10 }}
      >
        <RadioButton
          key={i}
          value={item.duration}
          color="#FF9F4D"
          style={{ alignItems: 'center' }}
        >
          <View style={styles.line}>
            <View
              style={{
                flexDirection: 'row',
              }}
            >
              <Text style={styles.textChoice}>{item.duration} Menit</Text>
              <Text style={styles.textSubCOD}>
                {/* ( 1 jam ) */}
              </Text>
              <Text style={styles.textUang}> Rp {item.price} </Text>
            </View>
          </View>
        </RadioButton>
      </RadioGroup>)

      )
    }
  }