在 2 个反应组件中使用相同的功能。第二个不起作用

Question

我与 TypeError 斗争：deleteEducation 不是一个函数 - 2 个 React 组件中的相同函数。

该组件有效。

    import React, { Fragment } from 'react'

    import PropTypes from 'prop-types';

    import { connect } from 'react-redux';

    import Moment from 'react-moment';

    import { deleteEducation } from '../../actions/profile';

    export const Education = ({ education, deleteEducation }) => {

        const educations = education.map(edc => (

            <tr key={edc._id}>

                <td>

                    <button className='btn btn-danger' onClick={() => deleteEducation(edc._id)} >Delete</button>

                </td>

            </tr>

        ));

        return (

            <Fragment>

                <h2 className='my-2'>Education Credentials</h2>

                <table className="table">

                    <tbody>

                        {educations}

                    </tbody>

                </table>

            </Fragment>

        )

    }

    Education.propTypes = {

        education: PropTypes.array.isRequired,

        deleteEducation: PropTypes.func.isRequired,

    }

    export default connect(null, { deleteEducation })(Education);

这没有。我想使用另一种不同的方法来删除Experience()。它不起作用，所以我尝试了相同的功能，但组件名称不同。

import React, { Fragment } from 'react'

import PropTypes from 'prop-types';

import { connect } from 'react-redux';

import Moment from 'react-moment';

import { deleteEducation } from '../../actions/profile';

export const Experience = ({ education, deleteEducation }) => {

    const educations = education.map(edc => (

        <tr key={edc._id}>

            <td>

                <button className='btn btn-danger' onClick={() => deleteEducation(edc._id)} >Delete</button>

            </td>

            </tr>

    ));

    return (

            <Fragment>

                <h2 className='my-2'>Education Credentials</h2>

                <table className="table">

                    <tbody>

                        {educations}

                    </tbody>

                </table>

            </Fragment>

    )

}

Answer 1

您需要在两个组件的连接包装器中使用参数分派您的函数。改变export default connect(null, { deleteEducation })(Experience);至const mapDispatchToProps = dispatch => ({&nbsp; deleteEducation: id => dispatch(deleteEducation(id))})export default connect(null, mapDispatchToProps)(Experience);

Answer 2

我的导入错误，未包含在我的帖子中。抱歉 React 自动添加了默认导入，我没有注意到。import&nbsp;{&nbsp;Experience&nbsp;}&nbsp;&nbsp;from&nbsp;'./Experience'; import&nbsp;Education&nbsp;from&nbsp;'./Education';