如何在React

时间:2017-09-26 09:36:49

标签: api reactjs redux

我正在关注教程,现在我正在尝试创建自己的博客,但它给了我以下错误:

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})
}

还原器部分与获取联系人有关:

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
  }
}

1 个答案:

答案 0 :(得分:2)

而不是'('try'{'在mapStateToProps

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