如何在 React 中显示单个帖子答案

【问题标题】：How to display single post in React如何在 React 中显示单个帖子
【发布时间】：2018-03-07 11:08:42
【问题描述】：

我正在学习一个教程，现在我正在尝试制作自己的博客，但它给了我以下错误：

Syntax error: Unexpected token, expected ] (28:28)

  26 | 
  27 | function mapStateToProps({contacts}, ownProps) {
> 28 |   return (contact: contacts[ownProps.match.params.id])
     |                             ^
  29 | }

我有一个包含所有联系人的页面，当我单击联系人姓名时，我想显示一个包含完整详细信息的页面。后端应该可以正常工作，因为它会返回正确的用户（我用 Postman 测试过）。

这是我的ContactShow.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { fetchContact } from '../../actions';

class ContactShow extends Component {
    componentDidMount() {
        const { id } = this.props.match.params;
        this.props.fetchContact(id);
    }
    render() {
        const { contact } = this.props;

        if (!contact) {
            return <div>Loading...</div>;
        }
        return (
            <div>
                {contact.contactTitle} {contact.contactName}
                <br />
                {contact.contactAddress}
            </div>
        );
    }
}

function mapStateToProps({contacts}, ownProps) {
  return (contact: contacts[ownProps.match.params.id])
}

export default connect(mapStateToProps, {fetchContact})(ContactShow)

这里是actions/index.js：

export const fetchContact = (id) => async dispatch => {
  const res = await axios.get(`/api/contacts/${id}`)

    dispatch({type: FETCH_CONTACT, payload: res.data.contact})
}

以及与获取联系人相关的reducer部分：

case FETCH_CONTACT:
  return {...state, [action.payload.data.id]: action.payload.data};

确认一下，当我在 Postman GET localhost:5000/api/contacts/59c7b975d9d7eed098507a64 中写信时，我得到以下 json：

{
  "contact": {
    "_id": "59c7b975d9d7eed098507a64",
    "contactTitle": "Mrs",
    "contactName": "Lisa",
    "contactEmail": "lisa@hexample.com",
    "contactTelephone": "12345678",
    "contactAddress": "Example Road, 12",
    "__v": 0
  }
}

【问题讨论】：

标签： api reactjs redux

【解决方案1】：

在你的 mapStateToProps 中尝试使用 '{' 而不是 '('

function mapStateToProps({contacts}, ownProps) {
  return {contact: contacts[ownProps.match.params.id]}
}

【讨论】：

很棒的皮卡！但现在我得到TypeError: Cannot read property 'params' of undefined
@Al-josh 这意味着ownProps.match 不存在。我建议你在你的mapStateToProps 中加入一个调试器，看看ownProps 的实际样子。