從connect（mapStateToProps）獲取狀態>未定義

Question

當我記錄道具時，我有點努力獲取書本狀態：我不確定。

有小費嗎？

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組件中，返回以下內容

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

在BookForm constructor設置從國家props.book

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