从连接获取状态(mapStateToProps)>未定义

时间:2018-05-08 14:52:37

标签: javascript reactjs redux undefined connect

当我记录我得到的道具时,我有点难以获得书籍状态:未定义。

任何提示?

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

3 个答案:

答案 0 :(得分:0)

我在===失败之前遇到了问题,因为book.idprops.match.params.id的类型不同。 params值始终为字符串 - 可以尝试parseInt(props.match.params.id)==比较(使用类型强制)。

答案 1 :(得分:0)

我设法找到了我的错误。

在组件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无法匹配

答案 2 :(得分:0)

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

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

EditBook组件中返回以下内容

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

BookForm constructor设置状态props.book

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