来自后面的数据变成未定义的，即使它们在记录它们时出现

Question

我正在尝试将从返回的值分配给对象 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: 'manondupont@gmail.com',
    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 未定义。我不明白为什么。

Answer 1

数组一开始是空的：

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

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

你看到一个数组无论如何都会被记录下来，因为在 useEffect 函数运行后抛出错误（不是传递给 useEffect 的回调，而是呼叫 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
        // ...

Answer 2

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

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

然后你可以像这样解构这些值，

{name, email,...} = details

Answer 3

添加 OR 运算符，您可以 return 一个空对象，以防 details 未定义为空：

const {
  first_name, last_name, email, logo, phone
} = details || {};

来自后面的数据变成未定义的，即使它们在记录它们时出现

Datas from back turn into undefined even though they appear when logging them

undefined

destructuring

reactjs