从后方返回的数据会变成未定义的数据，即使它们在登录时出现

问题描述

我正在尝试将从我获得的值分配给对象 initialvalues 。我确实得到了这些数据，但是在将它们分配给变量时它们变成未定义的。

import { Formik,Form } from "formik";
import * as Yup from "yup";
import axios from "axios";
//components
import FormikControl from "../formik/FormikControl";
import Button from "../Button";

const UpdateUserProfile = (props) => {
  const userID = 8; //(state)
  const [myDetails,setMyDetails] = useState([]);

  useEffect(() => {
    const getMyDetails = async () => {
      const url = `http://localhost:5000/allpeople/myDetails/${userID}`;
      const result = await axios.get(url);
      setMyDetails(result.data);
    };
    getMyDetails();

    
  },[]);
  let first_name,last_name,email,logo,phone

  if (myDetails.length) {
    const details = myDetails[0];
   first_name = details.first_name
    console.log('first_name:',first_name) //output: Manon
    
  }
  
  console.log('first_name:',first_name) // output Manon
  let initialValues = {
    first_name: first_name,last_name: 'dupont',email: '[e-mail]',phone: '0600000000',logo: 'non renseigné',};


  const onSubmit = async (values) => {
    console.log("values:",values);
    const url = `http://localhost:5000/users/updateProfile/${userID}`;
    await axios.put(url,values);
  };

  return (
    <div>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={onSubmit}
      >
        {(formik) => (
          <Form className="signIn__form">
            <FormikControl
              control="input"
              type="text"
              name="first_name"
              label="Prénom"
            />
            <FormikControl
              control="input"
              type="text"
              name="last_name"
              label="Nom"
            />

             //...

            <Button
              type="submit"
              disabled={!formik.isValid}
              className={"btn btn--round"}
              value={"Modifier mon profil"}
            />
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default UpdateUserProfile;

我确实获得了分配给自己的值（在 initialValues 变量中），但是没有获得 first_name 的值，即使可以登录

提交表单 first_name 时未定义。我不明白为什么。

解决方法

数组开始为空：

const [myDetails,setMyDetails] = useState([]);

因此，当useEffect最初运行时，myDetails是一个空数组，因此myDetails[0]是undefined。

无论如何，您都会看到一个数组被记录下来，因为在useEffect函数运行后抛出了错误（不是回调传递给useEffect，而是 call 到useEffect）。

仅在填充数组后尝试从数组中提取元素，例如：

useEffect(() => {
    // ...
},[]);
if (myDetails.length) {
    const details = myDetails[0]
    const {
        first_name,last_name,email,logo,phone
    } = details;
    // ...
}

由于要在Formik组件中使用结果，因此将状态设置为效果钩子内的initialValues，然后在填充值后才渲染Formik组件：

useEffect(() => {
  axios.get(url)
    .then((result) => {
      setInitialValues(result.data[0])
    }).catch(handleErrors);
},[]);
// ...

return (
    <div>
      { !initialValues ? null : <Formik
        // ...

,

您可以尝试通过myDetails array进行映射，以获取数组内的对象值。例如

const details = myDetails.map(detail => detail)

然后您可以像这样破坏值，

{name,...} = details

,

添加OR运算符可以在未定义详细信息的情况下返回空对象为空：

const {
  first_name,phone
} = details || {};