javascript - 未执行操作（ADD

问题描述

ADD_CONTACT 操作未执行。当我单击存在 ContactListComponent.js 的特定联系人时，我想显示由 ContactDetailComponent.js 完成的联系人详细信息。你能告诉我我在哪里犯错了吗？（当我点击 ContactListComponent.js 中的按钮时，联系方式没有显示出来）

这是显示所有联系人的组件（ContactListComponent.js）

import React, { Component } from 'react';
import { NavItem, Card, CardBody, Nav, Button } from 'reactstrap';
//import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { addDetails } from '../redux/ActionCreators';
//import { Details } from '../redux/detail';

const mapDispatchToProps = (dispatch) => ({
    addDetails: (contact) => dispatch(addDetails(contact))
});

// const mapStateToProps = state => {
//     return {
//         details: state.details.contact
//     }
// }

function ContactList(props) {
    if (props.isLoading) {
        return (<span className="fa fa-spinner fa-pulse fa-fw"></span>);
    }
    else if (props.errMess) {
        return (<div className="bg-danger"><p>{props.errMess}</p></div>);
    }
    else {
        if (props.Contacts) {
            const contactl = props.Contacts.map((contact) => {
                return (
                    <NavItem key={contact._id} >
                        <Card >
                            <CardBody >
                                <Button onClick={() => addDetails(contact)}>{contact.username}</Button>
                            </CardBody>
                        </Card>
                    </NavItem>)

            });
            return (
                <Nav vertical>
                    {contactl}
                </Nav>
            );
        }
        else {
            return (
                <div><p>No contacts present</p></div>
            );
        }
    }
}

export default connect(null, mapDispatchToProps)(ContactList);

这是显示联系人详细信息的组件（ContactDetailComponent.js）。

import React from 'react';
import { } from 'reactstrap';
//import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

const mapStateToProps = state => {
    return {
        details: state.details.contact
    }
}
function ContactDetails(props) {
    console.log(props.details);
    if (props.details) {
        return (
            <div className="container">
                <h3>username: </h3>
                <p>{props.details.username}</p>
            </div>
        )
    }
    else {
        return (<div></div>);
    }
}

export default connect(mapStateToProps)(ContactDetails);

这是我的项目的 github 存储库

这是显示详细信息的按钮所在行的永久链接

标签： javascripthtmljqueryreactjsreact-redux

javascript - 未执行操作（ADD_CONTACT）

问题描述

解决方案

推荐阅读