React Native组件传值报错：TypeError: onAddBook is not a function

错误根源 #

1. 导航跳转的AddBook实例未接收props：你在BookList中通过navigation.navigate("AddBook")跳转的AddBook组件，和MainBook里直接渲染的<AddBook onAddBook={handleAddBook} />是两个独立实例，导航栈中的AddBook没有被传入onAddBook回调，导致调用时出现undefined错误。
2. BookList的map函数未返回组件：当前books.map内部没有返回Book组件，会导致书籍列表无法渲染。
3. Reducer的changed分支逻辑错误：changed case中使用了不存在的action.id，应该改为action.book.id。

具体修复步骤 #

1. 修复导航跳转传参问题（推荐方案）

修改MainBook组件：给BookList传递onAddBook回调

// MainBook.jsx
return (
  <>
    <AddBook onAddBook={handleAddBook} />
    <BookList
      books={books}
      onChangeBook={handleChangeBook}
      onDeleteBook={handleDeleteBook}
      onAddBook={handleAddBook} {/* 新增：传递添加书籍的回调 */}
    />
  </>
);

修改BookList组件：跳转时携带onAddBook参数

// BookList.jsx
const BookList = ({ books, onChangeBook, onDeleteBook, onAddBook }) => {
  const navigation = useNavigation();
  return (
    <View>
      {/* 修复map返回问题，同时增加key属性 */}
      {books?.map((book) => (
        <Book key={book.id} book={book} onChange={onChangeBook} onDelete={onDeleteBook} />
      ))}
      <TouchableOpacity onPress={() => navigation.navigate("AddBook", { onAddBook })}>
        <Text>add book</Text>
      </TouchableOpacity>
    </View>
  );
};

修改AddBook组件：从路由参数中获取onAddBook

// AddBook.jsx
const AddBook = ({ route, navigation }) => {
  const [text, setText] = useState('');
  const { onAddBook } = route.params; // 从路由参数获取回调函数

  function handleClick(){
    if (!onAddBook) return; // 增加容错判断，避免二次报错
    setText('');
    onAddBook(text);
    navigation.goBack(); // 使用goBack返回列表页，而非重新跳转
  }

  return (
    <View>
      <TextInput
        placeholder='add book'
        value={text}
        onChangeText={t=>setText(t)}
      />
      <TouchableOpacity onPress={handleClick}>
        <Text>add</Text>
      </TouchableOpacity>
    </View>
  )
}

2. 修复Reducer的changed分支逻辑

// MainBook.jsx中的booksReducer
case "changed": {
  return books.map((b) => {
    if (b.id === action.book.id) { // 修改为action.book.id
      return action.book;
    } else {
      return b;
    }
  });
}

备选方案：移除导航跳转，用状态控制AddBook显示 #

如果不需要将AddBook作为独立导航页面，可以通过状态切换来显示/隐藏组件：

1. 在MainBook中新增showAddBook状态，控制显示AddBook或BookList
2. 给BookList传递onShowAddBook回调，点击按钮时切换状态
3. 给AddBook传递onClose回调，添加完成后返回列表页

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