React useEffect hook - 使用ID的redux操作的无限循环

Question

我正在将useEffect与还原操作结合使用。我知道我必须从 props 中提取动作函数并将其作为第二个参数提供，该参数通常适用于批量获取。但是，如果我也使用道具中的 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
})
})
});

};

有人知道我做错了什么吗？

Answer 1

依赖项数组([fetchOneEmployee, id](中的一个值正在更改。很难说您提供的有限代码具有哪个价值。

乍一看，您可能希望数组中fetchOne而不是fetchOneEmployee。

Answer 2

你的inifite循环可能是因为fetchOneEmployee作为参数传递给useEffect引起的。您是否将 fetchOneEmployee 传递给 EmployeeEdit 作为箭头函数？如果你这样做了，那么获取一个员工总是会改变。

这是关于反应钩子获取数据的好文章的一部分。

https://www.robinwieruch.de/react-hooks-fetch-data

我特别推荐标题自定义数据获取钩

子