React刷新后useEffect失效 报读取undefined的startingDate错误

报错核心是异步数据渲染时机不对+空值访问越界：

• 组件首次渲染时，Axios请求还在pending阶段，config的初始值是空数组，此时config[0]为undefined，直接读取undefined.startingDate就会触发类型错误。
• 首次配置后临时生效是因为刚提交完配置时，接口返回时序、临时缓存刚好凑上，刷新或其他用户访问时，组件首次渲染必然先执行在请求返回前，直接触发报错。另外如果接口返回空数组、非数组结构、单条配置对象时，直接取下标0的写法也会直接失效。

1. 修正状态初始化与请求逻辑：不要用数组存单条配置，初始值设为null代表未加载，增加加载态和接口异常、空数据的兜底判断，确保只有拿到有效配置后再渲染依赖配置的表单项。
2. 修复代码隐性问题：原日期input的placeholder属性缺少闭合引号，提交端state无初始值会向后端传undefined，都会导致功能异常。

共享表单侧代码 #

import { useState, useEffect } from 'react';
import Axios from 'axios';

// 其他业务逻辑...

const [config, setConfig] = useState(null);
const [loading, setLoading] = useState(true);
const [date, setDate] = useState("");

useEffect(() => {
  setLoading(true);
  Axios.get("http://localhost:3005/adminConfig/")
    .then((response) => {
      // 校验接口返回格式，避免非数组结构报错
      const configRes = Array.isArray(response.data) ? response.data : [];
      setConfig(configRes.length ? configRes[0] : null);
    })
    .catch(err => {
      console.error("表单配置拉取失败", err);
      setConfig(null);
    })
    .finally(() => {
      setLoading(false);
    })
}, []);

// 加载态兜底
if (loading) return <div>表单配置加载中，请稍候...</div>;
// 无有效配置兜底
if (!config) return <div>当前表单未到开放时间或未完成配置，请联系管理员</div>;

// 配置正常时渲染表单
return (
  <>
    {/* 其他表单项 */}
    <input
      type="date"
      placeholder="Date of the meeting"
      name="date"
      id="datePickerId"
      min={config.startingDate}
      max={config.endingDate}
      onChange={(event) => setDate(event.target.value)}
      required
    />
    {/* 其他表单项 */}
  </>
)

配置提交侧优化代码 #

// 给所有state补初始值，避免向后端提交undefined
const [startingDate, setStartingDate] = useState("");
const [endingDate, setEndingDate] = useState("");
const [startingTime, setStartingTime] = useState("");
const [endingTime, setEndingTime] = useState("");
const [places, setPlaces] = useState("");

const createConfig = () => {
  Axios.post("http://localhost:3005/adminConfig", {
    startingDate,
    endingDate,
    startingTime,
    endingTime,
    places,
    organization: user._id,
  }).then(() => {
    alert("配置提交成功")
  })
}

• 如果业务上永远只有一条有效配置，可以直接改后端接口返回单条对象而非数组，省去取下标0的逻辑，进一步降低出错概率。
• 传给日期input min/max属性的日期值要符合YYYY-MM-DD的标准格式，否则范围限制不会生效。

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