React Native自定义单选框如何设置首项为默认选中状态

问题现状 #

已实现chips样式的自定义单选框组件，初始状态下无任何选中项，需要调整为渲染后自动选中第一个选项，效果对比如下：

• 初始无选中状态：
  
• 预期默认选中首项效果：
  

原实现核心问题是组件内部选中状态userOption的初始值设为null，首次渲染时没有选项能匹配到选中值，因此不会展示选中样式，且父组件无法拿到初始选中值。

修改方案 #

仅需3处核心调整即可实现需求，同时修复原代码潜在问题：

• 将useState初始值替换为传入选项数组第一个元素的value值，加空值兜底避免空数组报错
• 组件挂载时主动触发选中回调，把默认选中值同步给父组件，避免父子状态不一致
• 补全原代码缺失的列表key属性、父组件状态声明，消除运行警告和报错

修改后完整可运行代码：

import { useState, useEffect } from 'react';
import { View, Pressable, Text } from 'react-native';

function Chips({ data, onSelect }) {
  // 初始值默认取第一个选项的value，空数据场景兜底为null
  const [userOption, setUserOption] = useState(data?.[0]?.value ?? null);

  const selectHandler = (value) => {
    onSelect(value);
    setUserOption(value);
  };

  // 首次挂载时同步默认选中值给父组件
  useEffect(() => {
    if (userOption !== null) {
      onSelect(userOption);
    }
  }, []);

  return (
    <View style={{flexDirection: "row"}}>
      {data.map((item) => {
        return (
          <Pressable
            key={item.value}
            style={[
              item.value === userOption ? styles.selected : styles.unselected,
              styles.commonChips
            ]}
            onPress={() => selectHandler(item.value)}
          >
            <Text style={{
              color: item.value === userOption ? '#fff' : '#bfccd3',
              fontWeight: "bold"
            }}>
              {item.value}
            </Text>
          </Pressable>
        );
      })}
    </View>
  );
}

export default function App(){
  // 补全原代码缺失的option状态声明
  const [option, setOption] = useState(null);
  return (
    <Chips data={data} onSelect={(value) => setOption(value)} />
  )
}

扩展优化 #

如果后续需要支持自定义默认选中项，只需要给Chips组件新增一个defaultValue入参，把useState初始值替换为defaultValue ?? data?.[0]?.value ?? null即可，组件灵活性更高。

内容的提问来源于stack exchange，提问作者John Ocean