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

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

                })

        })

});

};


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


弑天下
浏览 206回答 2
2回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript