使用useSelector观测Redux状态更新后，Book组件未渲染求助

核心问题：函数未返回渲染元素 #

你的renderBooks函数存在两个关键问题，导致<Book>组件无法渲染：

1. map回调函数内创建了<Book>组件，但没有返回这个组件；
2. renderBooks函数本身也没有返回map执行后的组件数组。

React在渲染时需要明确获取到要渲染的元素/组件集合，现在你的函数相当于只执行了逻辑，但没把需要渲染的内容返回给JSX。

修复后的代码 #

const renderBooks = (books) => {
  // 必须返回map生成的组件数组
  return books.map((book) => {
    console.log(book.id);
    // 给每个子组件添加唯一key（React列表渲染的强制要求）
    return <Book key={book.id} props={book}/>;
  });
};

或者用更简洁的箭头函数写法（隐式返回）：

const renderBooks = (books) => 
  books.map((book) => (
    <Book key={book.id} props={book}/>
  ));

关于useSelector的重渲染问题 #

useSelector确实会在它选取的Redux状态发生变化时触发组件重渲染，逻辑和useState类似：它会对当前返回的状态值和上一次的结果做浅比较，如果值不同，就会触发组件重新渲染。

你能看到控制台打印出每个book的id，说明Redux状态已经更新，组件也确实触发了重渲染——问题只是没把要渲染的<Book>组件返回给JSX而已。

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