React useEffect hook - 带有使用 ID 的 redux 操作的无限循环答案

【问题标题】：React useEffect hook - infinite loop with redux action that uses IDReact useEffect hook - 带有使用 ID 的 redux 操作的无限循环
【发布时间】：2019-09-18 17:10:12
【问题描述】：

我将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，它会修复它吗？

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

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

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

【讨论】：

复制我更正的代码是一个错字

【解决方案2】：

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

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

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

我特别推荐 header CUSTOM DATA FETCHING HOOK

【讨论】：