在 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 => ({

  deleteEducation: id => dispatch(deleteEducation(id))

})

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

Answer 2

我的导入错误，未包含在我的帖子中。抱歉 React 自动添加了默认导入，我没有注意到。

import { Experience }  from './Experience';
import Education from './Education';