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

這不。 我想使用另一種不同的方法來 deleteExperience()。 它不起作用，所以我嘗試了相同的功能，但組件名稱不同。

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