无线电组未在反应中呈现（material ui）

Question

我在 React 中有一个叫做选项的状态，看起来像：

{
  "0": ["Peru", "Brazil", "Colombia", "Ecuador"],
  "1": ["False", "True"],
  "2": ["Kurdish", "Arab", "Egyptian", "Syrian"],
  "3": ["True", "False"],
  "4": ["Just Cause 2", "Grand Theft Auto 5", "The Elder Scrolls 4:  Oblivion", "The Witcher 3:  Wild Hunt"]
}

我希望数组值呈现在单选组中，在此示例中，RadioGroup 1 应包含对象键“0”的单选按钮，RadioGroup 2 对象键“1”等...

更形象的例子：

//Radio Group 1
O Peru
O Brazil
O Columbia
O Ecuador

//Radio Group 2
O False
O True

我正在尝试这样做，但是 Radio 没有在 Object.values 中呈现，我已经测试过它确实在 Object.values 之外呈现，如果我输入一些常量值（用于测试目的）

const renderAnswers = (index) => {  // don't worry about what index is, just remember that I'm calling this function in main render
    return (
        <RadioGroup aria-label="quiz" name="quiz" onChange={handleRadioChange(index)}>
            {
                // Works but not inside Object.values
                // <FormControlLabel value="F" control={<Radio color="primary" />} label="F"} />
                Object.values(options).map((val, key) => {  //options is the state that I was talking about in the beginning                
                    val.map((v, k) => {
                        return (    
                            // Doesn't work I don't know why?
                            <FormControlLabel value={decodeEntities(v)} control={<Radio color="primary" />} label={decodeEntities(v)} />
                        );
                    })
                })
            }
        </RadioGroup>
    );
}

旁注：因为我的数组可以包含特殊字符 decodeEntities 是一个解码特殊字符和代码的函数，returns 字符串

Drew Reese 解决方案是这样做的：

//广播组1
O 秘鲁
哦巴西
哥伦比亚
O厄瓜多尔
O 假
真
O 库尔德
O 阿拉伯人
O 埃及
哦叙利亚
真
O 假
O Just 2 Cause
O 侠盗猎车手 5
O 上古卷轴 4：遗忘
O 巫师 3：狂猎

所有其他无线电组也一样

在主渲染中我正在做类似

的事情

props.data.results.map((val, index) => {
    return (
        <Grid item xs={12}>
            <Card>
                <CardContent>
                    <Grid container spacing={6} direction="column" justify="center" alignItems="center">
                        <Grid item xs={12}>
                            <Typography
                            variant="h6"
                            component="h6">
                            {decodeEntities(val.question)}
                            </Typography>
                        </Grid>
                        <Grid item xs={12}>
                            {renderAnswers(index)} // notice
                        </Grid>
                    </Grid>
                </CardContent>
            </Card>
        </Grid>
    );
}

在这种情况下，如果您想要更多，数据将作为道具通过另一个组件传递：https://github.com/JunedKhan101/Quiz-game 您要查找的文件是 src > Components > QuizForm.js

Answer 1

问题

您似乎没有返回映射的外部元素。

Object.values(options).map((val, key) => {    
  val.map((v, k) => { // <-- not returned !!
    return (    
      <FormControlLabel
        value={decodeEntities(v)}
        control={<Radio color="primary" />}
        label={decodeEntities(v)}
      />
    );
  })
})

解决方案

Return 你在映射什么。

Object.values(options).map((val, key) => {    
  return val.map((v, k) => {
    return (    
      <FormControlLabel
        value={decodeEntities(v)}
        control={<Radio color="primary" />}
        label={decodeEntities(v)}
      />
    );
  })
})

或者删除大括号并使用隐式 returns

Object.values(options).map((val, key) =>
  val.map((v, k) => (
    <FormControlLabel
      value={decodeEntities(v)}
      control={<Radio color="primary" />}
      label={decodeEntities(v)}
    />
  ))
)

编辑 1

当然，这会将所有选项呈现到一个 RadioGroup 组件中。

如果您想为每个嵌套的选项数组单独设置单选按钮组，您需要先映射多个 RadioGroup 组件，然后再映射选项。

const renderAnswers = (index) => {
  return Object.values(options).map((group, groupIndex) => (
    <RadioGroup
      key={groupIndex}
      aria-label="quiz"
      name="quiz"
      onChange={handleRadioChange(index)}
    >
      {group.map((option, optionIndex) => {
        return (
          <FormControlLabel
            key={optionIndex}
            value={decodeEntities(option)}
            control={<Radio color="primary" />}
            label={decodeEntities(option)}
          />
        );
      })}
    </RadioGroup>
  ));
};

备注

您应该注意到它显示为一个单选组的原因是因为您没有额外的 UI 来帮助在视觉上“分组”单选组，即它们之间没有标签或分隔符。

编辑 2

经过讨论，我相信您打算使用传递的 index 并访问特定数组以呈现到单选组中。

const renderAnswers = (index) => {
  return (
    <RadioGroup
      aria-label="quiz"
      name="quiz"
      onChange={handleRadioChange(index)}
    >
      {options[index].map((option, index) => (
        <FormControlLabel
          key={index}
          value={decodeEntities(option)}
          control={<Radio color="primary" />}
          label={decodeEntities(option)}
        />
      ))}
    </RadioGroup>
  );
};

无线电组未在反应中呈现（material ui）

Radio Group not rendering in react (material ui)

reactjs

material-ui

radio-button

rendering

问题

解决方案

编辑 1

备注

编辑 2