React中Fetch获取数据后属性值为undefined，无法正常使用

核心原因 #

你遇到的问题大概率是API返回的数据结构和你预期的不一致，虽然请求成功拿到了数据，但WPM1/WPM2字段的访问路径不对，或者字段名不匹配。

排查步骤 #

1. 检查数据结构
   打开浏览器控制台，查看console.log(data)的输出：

   • 如果输出是数组（比如[{WPM1: 0, WPM2:20}, ...]），直接访问data.WPM1会返回undefined，需要取数组元素，比如data[0].WPM1。
   • 如果输出是嵌套对象（比如{code: 200, data: {WPM1:0, WPM2:20}}），要访问嵌套路径，比如data.data.WPM1。

2. 核对字段名大小写
   确认API返回的字段名和你代码里的WPM1/WPM2完全一致，比如接口返回小写wpm1/wpm2，大小写不匹配会导致访问不到值。

3. 对比其他页面的接口返回
   既然其他4个页面逻辑正常，把这个接口的返回结构和其他页面的接口返回做对比，看是否存在差异（比如这个接口返回数组，其他返回单个对象）。

修改后的示例代码 #

假设接口返回的是数组，取第一个元素：

if (phase == 2) {
    const cookies = new Cookies();
    const url = "http://localhost:7101/GetAllPlayerRounds?userID=" + cookies.get('UserID');
    fetch(url)
        .then((response) => response.json())
        .then((data) => {
            console.log('完整数据:', data);
            // 根据实际结构调整访问路径
            const targetData = Array.isArray(data) ? data[0] : data;
            setRound(targetData);
            console.log(`${targetData.WPM1} mine1 vs opponent2${targetData.WPM2}`);
            setPhase(3);
        })
}

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