家伙！需要帮助。
我正在生成FAQ模块类别的链接。出了问题。这是我的代码和错误报告在此之上。
<ul>
{
this.props.categories.map((category) => {
return (
<li className="text-white d-inline-block w-100 clearfix ml-0" key={ category.id }>{ category.name }
<a className="btn btn-primary float-right" onClick={ () => {
this.handleEditOpenModal(category.id);
} }>Edit</a>
<NavLink to={'/' + category.id } className="btn btn-warning float-right">Add To</NavLink>
<a className="btn btn-danger float-right"> Delete </a>
</li>
);
})
}
</ul>
这段代码给了我这些错误
> Uncaught Error: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.
in h1 (created by QuestionsAndAnswers)
in div (created by QuestionsAndAnswers)
in div (created by QuestionsAndAnswers)
in QuestionsAndAnswers (created by Connect(QuestionsAndAnswers))
in Connect(QuestionsAndAnswers) (created by DashBoardPage)
in div (created by DashBoardPage)
in div (created by DashBoardPage)
in div (created by DashBoardPage)
in div (created by DashBoardPage)
in DashBoardPage (created by Route)
in Route (created by AppRouter)
in Switch (created by AppRouter)
in div (created by AppRouter)
in Router (created by BrowserRouter)
in BrowserRouter (created by AppRouter)
in AppRouter
in Provider
at invariant (invariant.js?7313:42)
at throwOnInvalidObjectType (react-dom.development.js?cada:8591)
at reconcileChildFibers (react-dom.development.js?cada:9503)
at reconcileChildrenAtPriority (react-dom.development.js?cada:10127)
at reconcileChildren (react-dom.development.js?cada:10118)
at updateHostComponent (react-dom.development.js?cada:10370)
at beginWork (react-dom.development.js?cada:10609)
at performUnitOfWork (react-dom.development.js?cada:12573)
at workLoop (react-dom.development.js?cada:12682)
at HTMLUnknownElement.callCallback (react-dom.development.js?cada:1299)
>
> The above error occurred in the <h1> component:
in h1 (created by QuestionsAndAnswers)
in div (created by QuestionsAndAnswers)
in div (created by QuestionsAndAnswers)
in QuestionsAndAnswers (created by Connect(QuestionsAndAnswers))
in Connect(QuestionsAndAnswers) (created by DashBoardPage)
in div (created by DashBoardPage)
in div (created by DashBoardPage)
in div (created by DashBoardPage)
in div (created by DashBoardPage)
in DashBoardPage (created by Route)
in Route (created by AppRouter)
in Switch (created by AppRouter)
in div (created by AppRouter)
in Router (created by BrowserRouter)
in BrowserRouter (created by AppRouter)
in AppRouter
in Provider
Consider adding an error boundary to your tree to customize error handling behavior.
> react-dom.development.js?cada:1345 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See react-crossorigin-error for more information.
at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:1345)
at invokeGuardedCallback (react-dom.development.js?cada:1195)
at performWork (react-dom.development.js?cada:12800)
at batchedUpdates (react-dom.development.js?cada:13244)
at performFiberBatchedUpdates (react-dom.development.js?cada:1646)
at stackBatchedUpdates (react-dom.development.js?cada:1637)
at batchedUpdates (react-dom.development.js?cada:1651)
at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js?cada:1664)
at dispatchEvent (react-dom.development.js?cada:1874)
我可以理解问题接近行
<NavLink to={'/' + category.id } className="btn btn-warning float-right">Add To</NavLink>
如果我不生成地址（例如<NavLink to="/5ecf1cc7-e343-4ce9-bf71-26e02efeb7ba">...）在这种情况下我没有问题，但这不是我需要的。