React Formik 从 api 加载数据

Question

我是 React 新手，我检查了这个例子 https://stackblitz.com/edit/react-formik-master-details-crud-example?file=users%2FAddEdit.jsx

但如果我在 Formik 中使用“useEffect”，我会收到错误消息，但它在实时示例中有效

错误信息 React Hook "useState" 不能在回调中调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用

return (
    <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit}
    >
      {({ errors, touched, isSubmitting, setFieldValue }) => {
        const [user, setUser] = useState({});
        useEffect(() => {
          if (!isAddMode) {
            // get user and set form fields
            userService.getById(id).then(user => {
              const fields = ["title","firstName","lastName","email","role"];
              fields.forEach(field => setFieldValue(field, user[field], false));
              setUser(user);
            });
          }
        }, []);
        return (
          <Form>
            <h1>{isAddMode ? "Add User" : "Edit User"}</h1>
            <div className="form-row">
                <div className="form-group col-5">
                <label>First Name</label>
                <Field name="firstName" type="text" className={ "form-control" + (errors.firstName && touched.firstName ? " is-invalid" : "")                 }
                />
                <ErrorMessage name="firstName" component="div" className="invalid-feedback" />
              </div>
            </div>
         <Form>
        )
        }}
    </Formik>
  );

感谢您的解决方案

Answer 1

要使用钩子，你必须使用功能组件我认为你的主要组件是类组件，这就是它给出错误的原因