javascript - 组件生命周期中mapStateToProps什么时候发生

Question

我在表中有一个项目列表。我希望能够单击任何项​​目上的详细信息链接，然后转到新页面，在其中查看该项目的详细信息。下面是我的代码。

import React from 'react';
import { connect } from 'react-redux';
import toastr from 'toastr';
import { Link } from 'react-router';
import { bindActionCreators } from 'redux';
import * as documentActions from '../../actions/documentActions';

class DocumentDetailsPage extends React.Component {
  constructor(props) {
    super(props);

    this.deleteDoc = this.deleteDoc.bind(this);
  }

  deleteDoc(id) {
    this.props.actions.deleteDocument(id)
      .then(res => toastr.success('Document deleted successfully!'));
  }

  render() {
    const { document } = this.props;
    return (
      <div className="col s12">
        <div className="card qBox">
          <div className="card-content white-text">
            <span className="card-title">{document.title}</span>
            <p
            dangerouslySetInnerHTML={{ __html: document.content }}
            className="document-content"></p>
            <br />
            <p>Access Type: &nbsp;
              <span>{(document.access).toUpperCase()}</span></p><br />
            <div>
                Published Date :
              <p>{(document.createdAt) ?
                document.createdAt.split('T')[0] : ''}</p>
              <p id="owner">Author:
                {document.owner.firstName} {document.owner.lastName}</p>
            </div>
          </div>
          <div className="card-action">
            <Link to="/">back</Link>
            {this.props.auth.user.userId === document.ownerId &&
              <div className="right">
                <Link to={`/document/${document.id}`}>Edit</Link>
                <Link to="/" onClick={this.deleteDoc()}> Delete </Link>
              </div>
            }
          </div>
        </div>
      </div>
    );
  }
}

DocumentDetailsPage.propTypes = {
  document: React.PropTypes.object.isRequired,
  actions: React.PropTypes.object.isRequired,
  auth: React.PropTypes.object.isRequired,
};

function getDocumentById(documents, id) {
  const document = documents.filter(item => item.id === id);
  if (document) return document[0];
  return null;
}

function mapStateToProps(state, ownProps) {
  const documentId = ownProps.params.id; // from the path `/document/:id`
  let document;

  if (documentId && state.documents.length > 0) {
    document = getDocumentById(state.documents, parseInt(documentId, 10));
  }

  return {
    document,
    auth: state.auth,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(documentActions, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(DocumentDetailsPage);

当我点击details链接时，它应该将我带到这个带有路由document/:id的页面，我可以在其中读取id 从路由中获取相应的文档并在组件中渲染。但是当我进入此页面时，它告诉我 document 未定义。这有什么原因吗？或者是否有比使用 mapStateToProps 更好的方法从路由中获取参数 id？

Answer 1

这里有两个问题:

1) 您的 deleteDoc 类方法需要一个 id 参数，该参数将传递给您的操作创建者。因为您已经拥有完整的文档作为 Prop ，所以从对象中获取它而不是接收它:

 deleteDoc() {
    const { actions, document }  = this.props
    actions.deleteDocument(document.id)
      .then(res => toastr.success('Document deleted successfully!'));
  }

2) 您正在 onClick 处理程序中调用 deleteDoc 函数!

// Wrong
<Link to="/" onClick={this.deleteDoc()}> Delete </Link>

删除括号并简单地将函数的引用设置为onClick 属性，而不是实际调用的结果。 :)

// Right
<Link to="/" onClick={this.deleteDoc}> Delete </Link>