![](/img/trans.png)
[英]Upgrade to React version 16.10.2 error while using Ant Design Components. Function components cannot be given refs
[英]Using same function in 2 react components. Second doesnt work
我与 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,
})
}
}
您需要在两个组件的连接包装器中使用参数调度函数。
改变
export default connect(null, { deleteEducation })(Experience);
到
const mapDispatchToProps = dispatch => ({
deleteEducation: id => dispatch(deleteEducation(id))
})
export default connect(null, mapDispatchToProps)(Experience);
我的导入是错误的,它没有包含在我的帖子中。 抱歉 React 自动添加了默认导入,我没有注意到。
import { Experience } from './Experience';
import Education from './Education';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.