MERN项目中Axios异步加载导致writtenBooks未定义问题求助

问题核心 #

组件首次渲染时，author初始值为空对象{}，此时author.writtenBooks为undefined，直接调用map方法会触发Cannot read properties of undefined (reading 'map')错误，导致页面崩溃。虽然异步请求完成后数据会更新，但首次渲染的错误已经让组件停止运行。

解决方案 #

方案1：可选链+空值合并运算符（最简洁） #

直接在渲染时对writtenBooks做安全判断，避免undefined时调用map：

<ul>
  {author.writtenBooks?.map((book) => (
    <li key={book._id}>&rarr; {book.title}</li>
  )) ?? []}
</ul>

?.会在writtenBooks为undefined/null时终止访问，返回undefined；?? []则在左侧为undefined时返回空数组，保证渲染时不会出错。

方案2：添加加载状态 #

通过状态控制加载过程，避免在数据未就绪时渲染列表：

export default function AuthorPage() {
    const { id } = useParams()
    const [author, setAuthor] = useState({});
    const [loading, setLoading] = useState(true); // 新增加载状态

    useEffect(() => {
        async function getData() {
            try {
                const response = await axios.get(`/api/authors/${id}`);
                setAuthor(response.data);
            } catch (err) {
                console.error(err);
            } finally {
                setLoading(false); // 请求完成后无论成功失败都关闭加载
            }
        }
        getData();
    }, [id]); // 添加id到依赖数组，路由参数变化时重新请求

    if (loading) {
        return <div>Loading...</div>; // 加载中提示
    }
   
    return (
      <>
        <SectionTitle title={`${author.firstName} ${author.lastName}`} link="/allauthors" btn="Go Back" />

        <section className='AuthorPage margins mt2'>
            <h4 className='mt1 mb1'>Books available by this author:</h4>
             <ul>
                {author.writtenBooks.map((book) => (
                    <li key={book._id}>&rarr; {book.title}</li>
                ))}
            </ul>
        </section>
    </>
    )
}

方案3：初始化state时预设空数组 #

把author的初始值设置为包含空数组的对象，确保首次渲染时writtenBooks是可遍历的：

const [author, setAuthor] = useState({ writtenBooks: [] });

这样即使数据还没加载，author.writtenBooks.map也能正常执行（遍历空数组，渲染空列表）。

额外注意事项 #

• 原代码中useEffect依赖数组为空，当路由参数id变化时不会重新请求数据，必须把id加入依赖数组，否则从一个作者页跳转到另一个作者页时会显示旧数据。
• 后端的populate('writtenBooks')逻辑是正确的，数据能正常返回，问题完全出在前端的异步渲染时机处理上。

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