时间戳

首页 > 解决方案 > React Formik 从 api 加载数据

reactjs - React Formik 从 api 加载数据

问题描述

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

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

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

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>
  );

感谢您的解决方案

标签： reactjsformik

解决方案

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

推荐阅读