如何在本机反应中在单选按钮中提供 fetch api？

Question

我正在使用 this package for radio button。我正在尝试在单选按钮中显示 api 的结果。api 响应包含 4 个选项。所以我想用 4 个单选按钮呈现文本，但现在我只得到一个带文本的单选按钮。这就是它的样子

这是代码

{
  this.state.data.map(a => (
    <Card>
      <CardItem>
        <Text style={styl.textStyle}>
          {(a.content = a.content.replace(/(<([^>]+)>)/gi, ""))}
        </Text>
      </CardItem>
      <CardItem>
        <RadioGroup
          size={24}
          thickness={2}
          color="#9575b2"
          highlightColor="#ccc8b9"
          selectedIndex={1}
          onSelect={item => this._onSelect(item, i++)}
        >
          <RadioButton value={a.options}>
            <Text>{a.options}</Text>
          </RadioButton>
        </RadioGroup>
      </CardItem>
    </Card>
  ));
}

json 响应

{
                "type": "single",
                "hint": "",
                "explanation": ".",
                "content": "<p>3. The World Banks’ Doing Business Report 2018 was the fifteenth edition since its inception in 2003. Examine the following statements about the Report and select the correct answer using the codes given below.</p>\n<p>I. Doing Business uses 11 indicator sets to measure aspects of business regulation that matter for entrepreneurship.</p>\n<p>II. India is one of the 10 economies that improved the most in the areas measured by Doing Business as per the 2018 Report.</p>\n<p>III. South Asia is the only region not represented in the top 50 ranking for ease of doing business.</p>\n",
                "options": [
                    "(a) I, II and III are correct ",
                    "(b) Only I is correct ",
                    "(c) Only I and II are correct ",
                    "(d) Only III is correct "
                ],
                "correct": "1",
                "marks": 4,
                "user_marks": 0,
                "status": 0,
                "marked": null,
                "auto": 1
            },

请帮忙。非常感谢您的帮助。

Answer 1

您可以执行类似的操作，在 radiogroup 内创建循环，以根据 json 响应呈现您的单选按钮。

<RadioGroup
  size={24}
  thickness={2}
  color="#9575b2"
  highlightColor="#ccc8b9"
  selectedIndex={1}
  onSelect={item => this._onSelect(item, i++)}
  >
  {
    a.options.map((item, key) =>
    (
      <RadioButton value={item}>
        <Text>{item}</Text>
      </RadioButton>
    ))
  }
</RadioGroup>

Answer 2

当您收到响应时，从状态变量中提取选项值，然后在您想要的任何地方使用该状态变量

.then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            option_1_value:responseJson.options[0],
            option_2_value:responseJson.options[1],
        option_3_value:responseJson.options[2],
        option_4_value:responseJson.options[3],
          })
 })
 .catch((error) => {
          console.error(error);
 });