Как дать fetch api внутри переключателя в реагировать родной?

Question

Я использую этот пакет для переключателя .Я пытаюсь показать результат API в Radio button. Ответ 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 response

{
                "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

Вы можете сделать что-то вроде этого, чтобы сделать цикл внутри радиогруппы для рендеринга ваших радиокнопок в соответствии с ответом 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);
 });