javascript - 反应原生单选按钮未选中填充圆圈

Question

我在地图函数中有这个简单的代码来构建一个单选按钮：

<DataTable>
{props.options.map((o,i) =>{
   return(
   <>
   <DataTable.Row>
      <DataTable.Cell style={{flex:7}}>{o.name}</DataTable.Cell>
      <DataTable.Cell style={{flex:1}}>
         <RadioButton
            value={i}
            status={ o.sel ? 'checked' : 'unchecked' }
            onPress={() =>{updateRadio(i)}}
         />
      </DataTable.Cell>
   </DataTable.Row>
   </>
</DataTable>

使用此功能更新收音机：

const updateRadio = (index) => {
        var temp = props.options
        temp.map((o,i) =>{
            if (i === index)
                temp[i].sel = true
            else
                temp[i].sel = false
        })
        props.setOptions(old => [...temp])
}

props.options 是这样的：

[{
    "id": "602b883a53c89933b8238339",
    "name": "Yes",
    "sel": false,
    "value": null
},
{
    "id": "602b883a53c89933b823833a",
    "name": "No",
    "sel": false,
    "value": null
}]

如果我看到 props.options 它可以正确更新，但收音机无法正确看到。

在第一次打开我有这个：

如果我第一次单击“是”（或“否”），我会正确： 使用 props.options：

[{
    "id": "602b883a53c89933b8238339",
    "name": "Yes",
    "sel": true,
    "value": null
},
{
    "id": "602b883a53c89933b823833a",
    "name": "No",
    "sel": false,
    "value": null
}]

接下来，如果我检查否（或是）我有这个： 使用 props.options：

[{
    "id": "602b883a53c89933b8238339",
    "name": "Yes",
    "sel": false,
    "value": null
},
{
    "id": "602b883a53c89933b823833a",
    "name": "No",
    "sel": true,
    "value": null
}]

为什么收音机无法正确渲染？

编辑：我发现这种行为：第一个打开按钮（未选中）有边框宽度：2px

选择和取消选择（未选中）边框宽度为 20px （而不是 2px ）

重新选择（选中）边框宽度为 20px （而不是 2px ）

标签： javascriptreact-nativeradio-buttonreact-native-paper