React中修改data.json的isBookmarked值时遇属性未定义问题

1. 处理数据未加载的边界情况 #

你的问题核心是调用handleUpdateData时，数据可能还没完成加载，或者data的结构不符合预期。首先要确保只有在数据加载完成后，才执行修改操作：

const [data, setData] = useState([]);
const [loading, setLoading] = useState(true); // 添加加载状态

useEffect(() => {
    axios.get("./data.json")
    .then(res => {
        setData(res.data);
        setLoading(false); // 数据加载完成后标记为false
    })
    .catch(err => {
        console.error(err);
        setLoading(false);
    });
}, []);

function handleUpdateData(index){
    // 数据未加载或目标索引不存在时直接返回，避免报错
    if (loading || !data[index]) return;

    // 正确修改isBookmarked状态（深拷贝确保不可变更新）
    const newData = data.map((item, idx) => {
        if (idx === index) {
            return {...item, isBookmarked: !item.isBookmarked};
        }
        return item;
    });
    setData(newData);
};

2. 检查data.json的结构是否正确 #

确保你的data.json整体是数组格式（因为你把state初始化为数组[]），比如：

[
  {
    "title": "Beyond Earth",
    "thumbnail": {
      "trending": {
        "small": "./assets/thumbnails/beyond-earth/trending/small.jpg",
        "large": "./assets/thumbnails/beyond-earth/trending/large.jpg"
      },
      "regular": {
        "small": "./assets/thumbnails/beyond-earth/regular/small.jpg",
        "medium": "./assets/thumbnails/beyond-earth/regular/medium.jpg",
        "large": "./assets/thumbnails/beyond-earth/regular/large.jpg"
      }
    },
    "year": 2019,
    "category": "Movie",
    "rating": "PG",
    "isBookmarked": false,
    "isTrending": true
  },
  // 其他影片对象...
]

如果你的data.json是单个对象（不是数组），那setData(res.data)会把data变成对象，此时data[0]自然不存在，需要把state初始化为useState({})，并调整修改逻辑。

为什么console.log(data[0])能显示，但data[0].isBookmarked报错？ #

这是浏览器控制台的特性：console.log输出的是对象的引用，当后续数据加载完成后，控制台会更新显示的内容，但代码执行时data[0]实际是undefined，所以访问isBookmarked会抛出“未定义”错误。你可以用console.log(JSON.parse(JSON.stringify(data[0])))查看代码执行时的真实值。

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