在本机反应中使用循环动态创建单选按钮

Question

我正在用 React Native 创建一个示例应用程序。 在这个应用程序中，我在一个数组中获取了 API 数据。 我需要做的是根据数组中的元素数量创建单选按钮的数量。 所以我使用了从索引位置 0 到数组长度执行的循环，但问题是不是显示等于数组中元素数的单选按钮，它只是显示该特定数组的最后一个元素的单选按钮。

下面是代码

    var json_response_SelectSegment = await AuthService.GetSegmentDropdown(this.state.machineId,this.state.orderBySegment,this.state.orderByDescendingSegment,this.state.allRecordsSegment);
    console.log("***got Segment Data*******",json_response_SelectSegment.data.data.segmentMainResponse.segmentResponse)
  var Json_respo_Segment=json_response_SelectSegment.data.data.segmentMainResponse.segmentResponse
  console.log("data = ",Json_respo_Segment.length)
  for(i=0;i<Json_respo_Segment.length;i++){
   console.log("**",Json_respo_Segment[i].Segment)
   console.log("**",Json_respo_Segment[i].SegmentId)
   this.state.radio_props_Segment=[{ label: Json_respo_Segment[i].Segment, value: Json_respo_Segment[i].Segment }]
   console.log("Hello : ",this.state.radio_props_Segment)
   
  }

它显示了 console.log 中的所有数组元素（例如数组包含 4 个元素），但它只为 UI 中的最后一个元素创建单选按钮

请问有什么解决办法吗？

Answer 1

试试这个方法

 const radioData = [];

  for(i = 0 ; i < Json_respo_Segment.length ; i++){
   
    radioData.push(
        { label: Json_respo_Segment[i].Segment, 
          value: Json_respo_Segment[i].Segment 
        }
     );   
  }

  const data = [...this.state.radio_props_Segment];
  data.push(radioData);
   
  this.setState({radio_props_Segment: data});