React组件出现Cannot read properties of undefined(reading 'advertHistory')错误求助

错误原因 #

组件首次渲染时，relate的初始值为undefined（因为useState()未设置初始值），而useFormik会在此时立即执行，直接访问relate.advertHistory这类属性自然会触发"读取undefined的属性"错误。另外，useEffect中的异步请求是在组件挂载后才发起的，请求完成前relate一直是undefined，这期间的渲染必然会导致报错。

修复方案 #

可以通过以下几种方式解决，推荐结合使用：

1. 给relate设置初始空对象

将useState()改为useState({})，这样初始时relate是一个空对象，访问它的属性时不会抛出错误，只会返回undefined，待异步请求完成后再更新为真实数据。

2. 使用可选链操作符（?.）安全访问属性

在访问relate的属性时添加?.，确保当relate为undefined或null时不会报错，直接返回undefined。

3. 处理受控输入框的undefined值

在input的value属性中添加|| ""，避免因为值为undefined导致输入框显示"undefined"字符串，同时满足受控组件的要求。

修复后的完整代码 #

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;

内容的提问来源于stack exchange，提问作者edebali erman