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

【问题标题】：How to map the radio button and retrieve the value without duplicates如何映射单选按钮并检索不重复的值
【发布时间】：2019-07-22 10:34:16
【问题描述】：

我使用库react-native-flexi-radio-button，使用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>

      )
    }
  }

我想在没有重复单选按钮的情况下获得价值和单选功能

【问题讨论】：

你能编辑这个问题并在其中包含onSelectService函数吗？

标签： javascript reactjs react-native radio-button

【解决方案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>)

      )
    }
  }

【讨论】：