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

Experience.propTypes = {
    education: PropTypes.array.isRequired,
    deleteEducation: PropTypes.func.isRequired,
}

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

不知道怎么回事

        <Fragment>
            <DashboardActions />
            {profile.education.length ===  0 ? null : (<Experience education={profile.education} />)}
            {profile.education.length === 0 ? null : (<Education education={profile.education} />)}
        </Fragment>

这是我的错误

TypeError: deleteEducation is not a function
onClick
F:/DevConnector/client/src/components/dashboard/Experience.js:22
  19 |             )}
  20 |         </td>
  21 |         <td>
> 22 |             <button className='btn btn-danger' onClick={() => deleteEducation(edc._id)} >Delete</button>
     | ^  23 |         </td>
  24 |         </tr>
  25 | ));

我的调度函数

export const deleteEducation = id => async dispatch => {
    try {
        const res = await axios.delete(`/api/profile/education/${id}`);
        dispatch({
            type: UPDATE_PROFILE,
            payload: res.data,
        })
        dispatch(setAlert('Education Removed', 'success'));

    } catch(err) {
        console.log(err);
        const errors = err.response.data.errors;
        if(errors) {
            errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
        } 

        dispatch({
            type: PROFILE_ERROR,
        })
    }
}

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';