React中useEffect未正确设置schedules状态属性求助

问题描述 #

React前端项目里，useEffect钩子无法正确设置schedules状态属性。浏览器网络面板显示.NET Core API返回的JSON数据包含schedules数组，但调用response.json()后，该属性变成空数组，可排除API端问题。

API返回的原始JSON #

{"emailTemplateKey": 18,"emailProfileKey": 6,"name": "Test name #5","description": "Test description #5","subject": "Test subject #5","body": "Test body #5","query": "Test query #5","enabled": false,"schedules": [{"emailTemplateScheduleKey": 11,"scheduleKey": 4},{"emailTemplateScheduleKey": 12,"scheduleKey": 1}]}

前端相关代码 #

useEffect请求代码

useEffect(() => {
if (templateId !== undefined) {
  const fetchTemplate = async () => {
    const url = apiUrl(`/email-templates/${templateId}`);
    const response = await fetch(url);
    
    try {
      const data = await response.json();
      console.log("data", data);
      setTemplate(data);
    } catch (error) {
      console.error("Error during response.json(): ", error);
    }
  };

  fetchTemplate();
}
}, [templateId]);

useState初始化代码

const [template, setTemplate] = useState({
emailTemplateKey: null,
emailProfileKey: null,
name: "",
description: "",
subject: "",
body: "",
query: "",
enabled: false,
schedules: []
});

控制台日志输出 #

{"emailTemplateKey": 18,"emailProfileKey": 6,"name": "Test name #5","description": "Test description #5","subject": "Test subject #5","body": "Test body #5","query": "Test query #5","enabled": false,"schedules": []}

排查方向及解决方案 #

1. 检查.NET Core API的序列化配置
   大概率是API端JSON序列化问题：比如用Newtonsoft.Json时，schedules属性被标记了[JsonIgnore]；或是用System.Text.Json时，被配置为忽略该字段。去API的实体类里确认schedules字段的序列化特性，确保未被忽略。

2. 排查API中间件是否篡改响应
   查看API端是否有自定义中间件，可能在返回响应时过滤掉了schedules属性；同时检查CORS、压缩类中间件是否影响了响应内容。

3. 解决前端缓存问题
   浏览器可能缓存了旧响应，可在请求头添加Cache-Control: no-cache强制刷新，或是在URL后拼接随机参数（如/${templateId}?t=${Date.now()}）避免缓存。

4. 手动解析响应文本验证
   把response.json()替换为response.text()，打印原始响应字符串，确认前端接收到的文本是否真的包含schedules数组。如果文本里有但解析后没有，可能是JSON格式存在隐藏问题（如特殊字符、语法错误），可手动用JSON.parse()解析并捕获错误：

const text = await response.text();
console.log("原始响应文本", text);
try {
  const data = JSON.parse(text);
  console.log("解析后的数据", data);
  setTemplate(data);
} catch (err) {
  console.error("JSON解析错误", err);
}

5. 监听状态更新确认变化
   若担心后续代码覆盖状态，可添加一个监听template变化的useEffect，打印最新状态：

useEffect(() => {
  console.log("最新template状态", template);
}, [template]);

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