从 connect(mapStateToProps) > UNDEFINED 获取状态

Question

我有点难以获得 book 的状态，当我记录 props 时，我得到 book: undefined。

有什么建议吗？

import React from 'react';
import { connect } from 'react-redux';
import BookForm from './BookForm';

const EditBook = (props) => {
 console.log(props)
  return (
    <div>
      hello
    </div>
  );
};

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

export default connect(mapStateToProps)(EditBook);

项目的其余部分在我的 Github 上：https://github.com/bananafreak/bookshelf

Answer 1

我之前运行遇到过这个问题，其中 === 会失败，因为 book.id 和 props.match.params.id 的类型不同。 params 值始终是字符串 - 可以尝试 parseInt(props.match.params.id) 或 == 比较（使用类型强制）。

Answer 2

我设法找到了我的错误所在。

在组件 BookListItem 中：

import React from 'react';
import { Link } from 'react-router-dom';

const BookListItem = ({ author, title, genre, text, id, pages }) => (
  <div>
    <Link to={`/edit/${id}`}><h2>{title}</h2></Link>
    <h3>by: {author}</h3>
    <p>{genre}</p>
    {pages > 0 && <p>{pages} pages</p>}
    <p>{text}</p>
    <p>-------------------------------</p>
  </div>
);

export default BookListItem;

在 ${id} 之前，不幸的是我有冒号 {/edit/:${id}} 所以 book.id 和 props.match.params.id 无法匹配

Answer 3

更新 BookListItem 中的 Link。您不需要 ${id} 之前的 :。 : 导致了问题。

<Link to={`/edit/${id}`}><h2>{title}</h2></Link>

在EditBook组件return下面

<BookForm {...props}></BookForm>

在BookFormconstructor设置状态从props.book

this.state = { ...props.book }

从 connect(mapStateToProps) > UNDEFINED 获取状态

getting state from connect(mapStateToProps) > UNDEFINED

javascript

undefined

connect

reactjs

redux