我正在开发一个MERN应用程序，这是一个在线书店。我使用Axios从MongoDB获取数据。数据基于连接的几个 Mongoose 模型：
作者型号：firstName（string），lastName（string），etc.，writtenBooks（Book model），它是一个对象数组）。Book model：title（string），author（Author model），etc.
有一个动态显示所有作者的页面-工作很好。当你点击其中一个作者时，它会把你带到一个显示有关这个特定作者的所有信息的页面。关于作者的所有数据- firstName等。加载良好，直到我尝试显示writtenBooks（这是来自不同模型的信息）-然后应用程序中断，页面变成空白。我在控制台中看到的错误是：'author.writtenBooks is undefined'
我已经看到有类似的问题，我收集的问题可能是这样的事实axios是异步的，所以页面加载之前获取数据，这就是为什么作者返回undefined，但我不知道我需要改变我的代码，使其工作.我尝试了许多解决方案，帮助别人，但没有为我工作.
你能帮帮我吗？：）
我将在控制台中添加author.writtenBooks日志：// Array（8）[ {...}，{...} ]

• 当我从返回部分的内部注解掉'{author.writtenBooks.map.}'时，我可以看到它。

此外，如果我在加载页面后取消注解该部分，则所有writtenBooks都会出现在页面上-正如我所希望的那样，但只要我刷新它，页面就会中断。
这里是Author数据的截图-只是为了向您展示writtenBooks已经填充：
author api in the browser

export default function AuthorPage() {
    const { id } = useParams()
    const [author, setAuthor] = useState({});

    useEffect(() => {
        async function getData() {
            const response = await axios.get(`/api/authors/${id}`);
            setAuthor(response.data);
        }
        getData();
    }, []);
   
    console.log(author.writtenBooks)

 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>
                ))} */}

                 {/* if you uncomment the code above, the data first loads, then breaks after page refresh */}

            </ul>
        </section>
    </>
    )
}

字符串
下面是来自控制器的代码：

// /api/authors/
const allAuthors = asyncHandler(async (req, res) => {
   const authors = await Author.find({}).sort({ createdAt: -1 })
   res.json(authors)
})

// /api/authors/:id 
const oneAuthor = asyncHandler(async (req, res) => {
   const author = await Author.findOne({ _id: req.params.id })
   .populate('writtenBooks').exec()
   res.json(author)
})

型
我试过将getData函数移到useEffect之外，然后从内部调用它，但是，正如预期的那样，它没有改变任何东西。我还试过使用fetch代替axios，但是结果是一样的。