React Native中如何确保传递的useState变量参数不为undefined？

问题根因 #

空值问题主要来自三个场景：

1. cookBooks 初始状态没有赋值，默认是undefined
2. Array.find 没有匹配到符合genre === 'Cookbook'的项时，返回值为undefined
3. useEffect 是异步触发，首次渲染时按钮已经生成，此时cookBooks还未完成赋值，提前点击就会传递空值

解决方法 #

• 按钮点击拦截
  给按钮加禁用状态，cookBooks未完成赋值时不可点击，从源头上避免传空：

<Button
  startIcon={<MaterialIcon name="edit" size={33} color="white" />}
  colorScheme="blue"
  style={styles.button}
  disabled={!cookBooks} // 新增禁用逻辑
  onPress={() =>
    navigation.navigate({
      name: 'EditBooks',
      params: { books: cookBooks },
    })
  }
/>

如果需要更友好的交互，还可以搭配加载状态，未拿到数据时按钮显示加载中。

• 传参时空值兜底
  使用空值合并运算符??给参数加默认值，就算cookBooks为空也会传入预设的默认结构，避免下一页报错：

params: { 
  books: cookBooks ?? {
    referenceId: '',
    bookTitle: '',
    genre: 'Cookbook'
  } as IBook 
}

• 状态初始化兜底
  声明cookBooks状态时直接给默认值，从根源上避免初始值为undefined：

const [cookBooks, setCookBooks] = useState<IBook>({
  referenceId: '',
  bookTitle: '',
  genre: 'Cookbook'
});

• 目标页参数兜底
  在EditBooks页面接收参数时再加一层兜底，就算上游传空也不会影响页面逻辑：

import { useRoute } from '@react-navigation/native';

// 页面内接收参数
const route = useRoute();
const { books = {} as IBook } = route.params || {};

额外排查点：可以在useEffect中打印userBooks和find的返回结果，确认userBooks中确实存在genre为Cookbook的项，避免因为数据结构不符合预期导致find返回空。

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