為什么在 material-ui 中輸入 formik 表單不起作用？

Question

我使用 Axios 並調用 API 作為我的輸入值，即使我設置了 enableReinitialize: true，但是

1. 當我想更改輸入時，它不起作用
2. 是的，驗證不起作用

我該如何解決這兩個問題？

    const validationSchema = yup.object({
      email: yup
        .string("Enter your email")
        .email("Enter a valid email")
        .required("Email is required"),
      password: yup
        .string("Enter your password")
        .min(8, "Password should be of minimum 8 characters length")
        .required("Password is required"),
    });
    
    const FormOfFactors = () => {
      const [Industry, setIndustry] = useState();
      const params = useParams();
    
      useEffect(() => {
        async function fetchMyAPI() {
          let response = await axios.get(
            "http://nahoor.af:8080/nahoor/company/" + params.id,
          );
          setIndustry(response.data);
        }
    
        fetchMyAPI();
      }, []);
      const formik = useFormik({
        initialValues: {
          Industry,
        },
        validationSchema: validationSchema,
        onSubmit: (values) => {
          alert(JSON.stringify(values, null, 2));
          console.log("bebin dorost shod?!", values);
        },
        enableReinitialize: true,
      });
    
      return (
        <div>
          <form onSubmit={formik.handleSubmit}>
            <TextField
              fullWidth
              variant="outlined"
              id="email"
              name="email"
              label="Email"
              value={formik.values.Industry?.email}
              onChange={formik.handleChange}
              error={formik.touched.email && Boolean(formik.errors.email)}
              helperText={formik.touched.email && formik.errors.email}
            />
            <TextField
              fullWidth
              variant="outlined"
              id="password"
              name="password"
              label="Password"
              type="password"
              value={formik.values.password}
              onChange={formik.handleChange}
              error={formik.touched.password && Boolean(formik.errors.password)}
              helperText={formik.touched.password && formik.errors.password}
            />
            <Button color="primary" variant="contained" fullWidth type="submit">
              Submit
            </Button>
          </form>
        </div>
      );
    };
    
    export default FormOfFactors;

Answer 1

在 Industry state 中定義您的所有狀態，並在每個文本字段中的名稱道具中定義每個字段的名稱，並為每個 onChange 使用 onChange = {(e)=>formik.seFieldValue("stateName",e.target.value)}