通过数组映射渲染的多个RadioForm单选按钮如何获取所有选中值提交

你需要先维护一个全局的答案存储状态，用来记录每道题的选中值，每次用户切换单选选项时更新对应题的答案，提交时直接读取这个状态即可。

代码示例（函数组件） #

import { useState } from 'react';
// 这里替换为你真实的问题数据源
const questionList = [
  { question: "问题1", choice: ["YES对应值", "NO对应值"] },
  { question: "问题2", choice: ["YES对应值", "NO对应值"] }
]

const QuestionPage = () => {
  // 初始化答案存储对象：键为题目索引/唯一ID，值为选中的答案
  const [answerMap, setAnswerMap] = useState(() => {
    const defaultAns = {}
    questionList.forEach((item, index) => {
      // 默认匹配RadioForm的initial=0，选第一个选项
      defaultAns[index] = item.choice[0]
    })
    return defaultAns
  })

  // 提交按钮触发逻辑
  const handleSubmit = () => {
    // answerMap就是所有题的选中答案，可直接按接口要求组装后提交
    console.log("所有题答案：", answerMap)
    // 此处写你的接口请求逻辑
  }

  return (
    <View>
      {questionList.map((item, i) => {
        const radio_props = [
          { label: "YES", value: item.choice[0]},
          { label: "NO", value: item.choice[1] },
        ]
        return (
          <View key={i}>
            <Text>{item.question}</Text>
            <View>
             <RadioForm
               radio_props={radio_props}
               initial={0}
               // 切换选项时更新对应题的答案
               onPress={(value) => {
                 setAnswerMap(prev => ({
                   ...prev,
                   [i]: value
                 }))
               }}
             />
            </View>
          </View>
        )
      })}
      <Button
        onPress={handleSubmit}
        text="Submit"
      />
    </View>
  )
}

注意事项 #

• 若你的问题列表存在唯一ID（如后端返回的questionId），建议用ID代替数组索引作为答案存储的键，避免列表顺序变更导致答案匹配错误
• 若使用类组件开发，将答案状态存到this.state中，用this.setState更新即可，核心逻辑完全一致

内容的提问来源于stack exchange，提问作者Shibi