reactjs - 映射时如何将每个单选按钮与对象相关联

问题描述

我正在尝试制作一个对随机事物有疑问的应用程序，每个事物都有不同的类别。用户只需要在“是”或“否”之间进行选择，非常简单。

我有一组对象，每个对象都有类别和问题，

const questionsArray = [
    {
        category: 'sports',
        question: 'Do you practice soccer?'
    },
    {
        category: 'sports',
        question: 'Do you practice baseball?'
    },
    {
        category: 'routine',
        question: 'Do you like to watch movies?'
    },
    {
        category: 'routine',
        question: 'Do you like to play video games?'
    },
    {
        category: 'food',
        question: 'Do you like pasta?'
    },
    {
        category: 'food',
        question: 'Do you like cake?'
    },
]

在这里，我循环遍历这个数组并向用户展示问题，

{questionsArray.map((data, i) => (
    <>
        <Text style={styles.text}>
            {i + 1} - {data.question}
        </Text>
        <Text style={{ color: "#fff", fontSize: 18, marginLeft: 10 }}>
            {data.atividades}
        </Text>
        <View style={styles.radioButtonContainer}>
            <RadioButton
                value="yes"
                color="#fff"
                uncheckedColor="#fff"
                status={checked === "yes" ? "checked" : "unchecked"}
                onPress={e => setChecked("yes")}
            />
            <Text style={styles.radioText}>Yes </Text>
        </View>
        <View style={styles.radioButtonContainer}>
            <RadioButton
                value="no"
                color="#fff"
                uncheckedColor="#fff"
                status={checked === "no" ? "checked" : "unchecked"}
                onPress={() => setChecked("no")}
            />
            <Text style={styles.radioText}>No </Text>
        </View>
    </>
))}

问题是我不知道如何将每个单选按钮与问题联系起来。我将此库用于单选按钮https://callstack.github.io/react-native-paper/radio-button.html

当前的行为是当我更改一个单选按钮时，它们都发生了变化，这是有道理的，因为它们使用的是相同的状态。

最后，当用户按下提交答案按钮时，我想要一个像这样的 JSON 作为输出，它显示每个类别有多少“是”答案：

{
 "result": {
    "sports": 1,
    "routine": 1,
    "food": 2
   } 
}

以下是完整代码：https ://snack.expo.io/UhoiXh4ri

标签： reactjsreact-native

reactjs - 映射时如何将每个单选按钮与对象相关联

问题描述

解决方案

推荐阅读