从connect(mapStateToProps)获取book状态返回undefined求助

看起来你在通过Redux获取指定ID的book时遇到了undefined的问题，我帮你梳理几个常见的排查方向和解决办法：

1. 先确认Redux Store中state.books的状态 #

首先你需要确认你的Redux store里的books数组是否正确初始化并且有数据。你可以在mapStateToProps里先打印一下state.books：

const mapStateToProps = (state, props) => {
  console.log('state.books:', state.books); // 检查这里的输出
  return { 
    book: state.books?.find((book) => book.id === props.match.params.id) 
  };
};

如果state.books是undefined或者null，那说明你的reducer没有正确初始化books的初始状态。比如你的books reducer应该像这样设置初始值：

// booksReducer.js
const initialState = {
  books: [] // 初始化为空数组，而不是undefined
};

export default function booksReducer(state = initialState, action) {
  // ...你的reducer逻辑
}

2. 检查ID的类型是否匹配 #

很多时候问题出在类型不匹配上：props.match.params.id从路由里获取的是字符串类型，但如果你的book.id是数字类型，用===全等比较就会失败，导致find返回undefined。

你可以把params.id转成数字再比较：

const mapStateToProps = (state, props) => {
  const bookId = parseInt(props.match.params.id, 10);
  return { 
    book: state.books.find((book) => book.id === bookId) 
  };
};

或者如果你不确定ID的类型，也可以用==进行松散比较，但更推荐显式转换类型，避免隐式转换带来的潜在问题。

3. 验证路由参数是否正确传递 #

检查你的路由配置是否正确设置了:id参数，比如：

// 路由配置示例
import { Route } from 'react-router-dom';
import EditBook from './EditBook';

<Route path="/edit-book/:id" component={EditBook} />

如果路由里没有:id，那props.match.params.id就会是undefined，自然找不到对应的book。你也可以在组件里打印props.match.params确认参数是否存在：

const EditBook = (props) => {
  console.log('match params:', props.match.params); // 检查id是否存在
  console.log(props)
  return (
    <div> hello </div>
  );
};

4. 处理异步加载的情况 #

如果你的books数据是通过API异步获取的，那组件挂载时state.books可能还是空数组，这时候find会返回undefined。你可以添加加载状态的判断，避免渲染错误：

const EditBook = (props) => {
  if (!props.book) {
    return <div>Loading...</div>; // 或者显示"找不到书籍"的提示
  }
  return (
    <div> {/* 这里渲染你的BookForm */} </div>
  );
};

另外，你也可以用可选链操作符?.来避免state.books为undefined时的报错，比如state.books?.find(...)，这样即使state.books还没加载，也不会抛出错误。

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