无法读取未定义的属性（读取“advertHistory”）为什么这样做？

Question

import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { useFormik } from "formik";

function RelateEdit() {
  const { relate_id } = useParams();
  const [relate, setRelate] = useState();

  useEffect(() => {
    axios
      .get(`http://localhost:3000/real-estate/${relate_id}`)
      .then((data) => setRelate(data.data))
      .catch((error) => console.log(error));
  }, [relate_id]);

  console.log(relate.advertHistory);
  const formik = useFormik({
    initialValues: {
      advertHistory: relate.advertHistory,
      buildingAge: relate.buildingAge,
      city: relate.city,
      deposit: relate.deposit,
      district: relate.district,
      dues: relate.dues,
      floorLocation: relate.floorLocation,
      furnished: relate.furnished,
      heating: relate.heating,
      neighbourhood: relate.neighbourhood,
      numberOfBathrooms: relate.numberOfBathrooms,
      numberOfRooms: relate.numberOfRooms,
      situation: relate.situation,
      title: relate.title,
      url: relate.url,
    },
    onSubmit: (values) => {
      axios
        .put(`http://localhost:3000/real-estate/${relate_id}`, values)
        .then((res) => console.log(res))
        .catch((error) => console.log(error));
    },
  });

  return (
    <div>
      {relate_id && relate && (
        <div>
          <form onSubmit={formik.handleSubmit}>
            <input
              type="text"
              onChange={formik.handleChange}
              name="advertHistory"
              value={formik.values.advertHistory}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="buildingAge"
              value={formik.values.buildingAge}
            />{" "}
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="city"
              value={formik.values.city}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="deposit"
              value={formik.values.deposit}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="district"
              value={formik.values.district}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="dues"
              value={formik.values.dues}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="floorLocation"
              value={formik.values.floorLocation}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="furnished"
              value={formik.values.furnished}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="heating"
              value={formik.values.heating}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="neighbourhood"
              value={formik.values.neighbourhood}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="numberOfBathrooms"
              value={formik.values.numberOfBathrooms}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="numberOfRooms"
              value={formik.values.numberOfRooms}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="situation"
              value={formik.values.situation}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="title"
              value={formik.values.title}
            />
            <br />
            <input
              type="text"
              onChange={formik.handleChange}
              name="url"
              value={formik.values.url}
            />
            <button type="submit">Güncelle</button>
          </form>
        </div>
      )}
    </div>
  );
}
export default RelateEdit;

我收到这个错误，请帮忙

Answer 1

错误“Cannot read properties of undefined (reading 'advertHistory')”意味着您正在尝试访问未定义值的“advertHistory”属性。在您的代码中，您试图在定义之前访问“relate.advertHistory”，这会导致此错误。

要解决此问题，您可以添加一个检查以确保在访问其属性之前定义“relate”。一种方法是在尝试访问其属性之前使用“&&”运算符检查“relate”是否存在。

例如，您可以替换行 使用以下代码：

console.log(relate && relate.advertHistory); 

或者你可以这样做 无论你在哪里使用这个领域，都这样做

 <input
          type="text"
          onChange={formik.handleChange}
          name="advertHistory"
          value={formik.values?.advertHistory}
        />

如果“relate”不是未定义的，这将只尝试访问“relate.advertHistory”，这将防止错误发生。

Answer 2

当您的应用第一次呈现时，相关状态 中没有任何内容，直到检索到您的 API 的响应。 在您的响应存储在状态后，您可以访问数据。

尝试空安全：

relate?.advertHistory

等等，将此空安全添加到您的所有代码和需要的地方