React使用useLocation时数组读取undefined报错求解决方案

问题根源在于接收组件可能在无location.state的场景下渲染（比如直接刷新页面、通过书签访问），导致location.state.blogPost.categories变为undefined；同时直接用location.state初始化useState只会在组件首次挂载时读取一次，后续location.state变化无法自动同步状态。

以下是可行的解决步骤：

1. 给状态初始化添加兜底默认值 #

在初始化useState时，用可选链操作符结合默认值，确保categories始终为数组类型，避免map操作报错：

// 接收组件
const location = useLocation();
const [title, setTitle] = useState(location.state?.blogPost?.title || '');
const [description, setDescription] = useState(location.state?.blogPost?.description || '');
const [categories, setCategories] = useState(location.state?.blogPost?.categories || []);
const [content, setContent] = useState(location.state?.blogPost?.content || '');

2. 用useEffect监听location.state变化 #

如果需要在location.state更新时同步本地状态（比如从其他页面导航过来时），监听location.state并更新状态：

import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

// 接收组件内
const location = useLocation();
const navigate = useNavigate();
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [categories, setCategories] = useState([]);
const [content, setContent] = useState('');

useEffect(() => {
  // 校验state是否存在，无数据时跳转至合法页面
  if (!location.state?.blogPost) {
    navigate('/blogPosts');
    return;
  }
  // 同步路由状态到本地组件状态
  const { title, description, categories, content } = location.state.blogPost;
  setTitle(title);
  setDescription(description);
  setCategories(categories || []); // 兜底空数组避免undefined
  setContent(content);
}, [location.state, navigate]);

3. 拦截无状态的非法访问 #

如果接收组件仅允许通过导航跳转进入，可在组件挂载时校验location.state，若不存在则直接跳转，防止用户非法访问：

useEffect(() => {
  if (!location.state?.blogPost) {
    navigate('/'); // 跳转到首页或博客列表页
  }
}, [location.state, navigate]);

为什么之前的useEffect没生效？ #

大概率是未将location.state加入依赖数组，或者初始化时已读取undefined值，后续useEffect未触发更新。确保依赖数组包含location.state，才能监听到路由状态的变化。

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