javascript - React useEffect hook - 带有使用 ID 的 redux 操作的无限循环
问题描述
我正在useEffect
与减少操作结合使用。我知道我必须从道具中提取动作函数并将其作为第二个参数提供,该参数通常适用于批量提取。但是,如果我也使用道具中的 ID,它最终会进入无限循环:
export function EmployeeEdit(props) {
const { fetchOneEmployee } = props;
const id = props.match.params.id;
const [submitErrors, setSubmitErrors] = useState([]);
useEffect(() => fetchOneEmployee(id), [fetchOneEmployee, id]);
const onSubmit = employee => {
employee = prepareValuesForSubmission(employee);
props.updateEmployee(employee._id, employee)
.then( () => props.history.goBack() )
.catch( err => setSubmitErrors(extractErrors(err.response)) );
};
return (
<div>
<h3>Edit Employee</h3>
<NewEmployee employee={props.employee} employees={props.employees} onSubmit={onSubmit} submitErrors={submitErrors} />
</div>
)
}
EmployeeEdit.propTypes = {
fetchOneEmployee: PropTypes.func.isRequired,
employees: PropTypes.array.isRequired,
employee: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
employees: state.employees.items,
employee: state.employees.item
})
export default connect(mapStateToProps, { fetchOneEmployee, updateEmployee })(EmployeeEdit);
以及 redux 操作:
export const fetchOneEmployee = (id) => dispatch => {
axios.get(`http://localhost:8888/api/users/${id}`)
.then(res => {
const employee = res.data;
dispatch({
type: FETCH_ONE_EMPLOYEE,
payload: employee
})
})
});
};
有人知道我做错了什么吗?
解决方案
您的依赖数组 ( [fetchOneEmployee, id]
) 中的值之一正在发生变化。很难说您提供的有限代码是哪个值。
乍一看,您可能想要fetchOne
而不是fetchOneEmployee
在您的数组中。
推荐阅读
- php - 如何从 ORACLE SQL 数据库调用/触发 PHP 脚本
- java - 根据 Java8 中的逻辑表达式验证 JSON
- ios - 是否可以在 iOS 应用程序中热交换离子代码?
- ruby-on-rails - 升级到 Rails 6 时 Active Storage 迁移出现错误
- kubernetes - Kubernetes——如果configmap改变了如何触发job?
- javascript - 异步调度完成后如何在组件中执行方法(thunk 或动作创建者)?
- javascript - 何在页面加载时在 div 上显示“欢迎”5 秒,然后使用 jquery 显示 div?
- sql - 我正在尝试调整 SQL 查询以获得更好的性能
- postman - 如何从 Postman 请求中读取文件名
- visual-studio - QtCreator 到 VS2015 的快捷方式