未捕获的不变违规:React.Children.only 预计会收到单个 React 元素子元素
Uncaught Invariant Violation: React.Children.only expected to receive a single React element child
我正在尝试将一个函数传递给生成 menu
的子项
认为我早些时候被卡住了,因为那个例子似乎有一个父子,而我的中间有一个 HOC:
var comparator;
const GenericIsUserLoggedInLink = React.memo(({ isHomeButton, isLoggedIn, logOutUser, route, anchorText, mobile, name, selected, handleItemClick }) => {
comparator = (prevProps, nextProps) => {
if (prevProps.isHomeButton !== nextProps.setProps.isHomeButton) {
return true;
}
if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
return true;
}
if (prevProps.mobile !== nextProps.setProps.mobile) {
return true;
}
if (prevProps.selected !== nextProps.setProps.selected) {
return true;
}
return false;
}
function currentNav(route, name, selected, anchorText, handleItemClick) {
const navItems = ['home', 'profile', 'dashboard'];
return (
<>
<Link href={route}>
{navItems.map(currentNavItem => (
<Menu.Item
key={currentNavItem}
name={name}
active={currentNavItem === selected ? true : false}
onClick={() => handleItemClick(currentNavItem)}>
{anchorText}
</Menu.Item>
))}
</Link>
</>
);
}
if (isHomeButton) {
return currentNav(route, name, selected, anchorText, handleItemClick)
}
if (isLoggedIn) {
if (anchorText === undefined) {
return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
}
else if (mobile) {
return currentNav(route, name, selected, anchorText, handleItemClick)
}
else if (!(mobile)) {
return currentNav(route, name, selected, anchorText, handleItemClick)
}
else if (anchorText) {
return <Link href={route}><a>{anchorText}</a></Link>
}
} else {
if (route === "/login") {
return <Link href="/login"><a>Log in!</a></Link>
}
return null
}
}, comparator);
class DesktopContainer extends Component {
state = {activeItem: 'home'}
hideFixedMenu = () => this.setState({ fixed: false })
showFixedMenu = () => this.setState({ fixed: true })
handleItemClick = (activeItem) => this.setState({ activeItem })
logOutUser = () => {
const { logOutUser } = this.props
logOutUser()
}
render() {
const { GenericHeadingComponent, children, getWidth, isLoggedIn, logOutUser } = this.props
const { fixed, activeItem } = this.state
return (
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
<Visibility
once={false}
onBottomPassed={this.showFixedMenu}
onBottomPassedReverse={this.hideFixedMenu}
>
<Segment
inverted
textAlign='center'
style={{ minHeight: 700, padding: '1em 0em' }}
vertical
>
<Menu
fixed={fixed ? 'top' : null}
inverted={!fixed}
pointing={!fixed}
secondary={!fixed}
size='large'
>
<Container>
<GenericIsUserLoggedInLink
isHomeButton={true}
route="/"
name='home'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={false}
/>
<GenericIsUserLoggedInLink
isLoggedIn={isLoggedIn}
route="/profile"
anchorText="Profile"
name='profile'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={false}
/>
<GenericIsUserLoggedInLink
isLoggedIn={isLoggedIn}
route="/dashboard"
anchorText="Dashboard"
name='dashboard'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={false}
/>
<Menu.Item position='right'>
<Button inverted={!fixed}>
<GenericIsUserLoggedInLink
route="/login"
isLoggedIn={isLoggedIn}
logOutUser={logOutUser}
/>
</Button>
<Button inverted={!fixed} primary={fixed} style={{ marginLeft: '0.5em' }}>
<Link href="/register">
<a>Register</a>
</Link>
</Button>
</Menu.Item>
</Container>
</Menu>
<GenericHeadingComponent />
</Segment>
</Visibility>
{children}
</Responsive>
)
}
}
DesktopContainer.propTypes = {
children: PropTypes.node,
}
class MobileContainer extends Component {
state = { activeItem: 'home' }
handleSidebarHide = () => this.setState({ sidebarOpened: false })
handleToggle = () => this.setState({ sidebarOpened: true })
handleItemClick = (activeItem) => this.setState({ activeItem })
logOutUser = () => {
const { logOutUser } = this.props
logOutUser()
}
render() {
const { GenericHeadingComponent, children, getWidth, isLoggedIn, logOutUser, mobile } = this.props
const { sidebarOpened, activeItem } = this.state
return (
<Responsive
as={Sidebar.Pushable}
getWidth={getWidth}
maxWidth={Responsive.onlyMobile.maxWidth}
>
<Sidebar
as={Menu}
animation='push'
inverted
onHide={this.handleSidebarHide}
vertical
visible={sidebarOpened}
>
<GenericIsUserLoggedInLink
isHomeButton={true}
route="/"
name='home'
anchorText="Home"
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={true}
/>
<GenericIsUserLoggedInLink
isLoggedIn={isLoggedIn}
route="/profile"
anchorText="Profile"
name='profile'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={true}
/>
<GenericIsUserLoggedInLink
isLoggedIn={isLoggedIn}
route="/dashboard"
anchorText="Dashboard"
name='dashboard'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={true}
/>
<Menu.Item>
<GenericIsUserLoggedInLink
route="/login"
isLoggedIn={isLoggedIn}
logOutUser={logOutUser}
/>
</Menu.Item>
<Menu.Item >
<Link href="/register">
<a>Register</a>
</Link>
</Menu.Item>
</Sidebar>
<Sidebar.Pusher dimmed={sidebarOpened}>
<Segment
inverted
textAlign='center'
style={{ minHeight: 350, padding: '1em 0em' }}
vertical
>
<Container>
<Menu inverted pointing secondary size='large'>
<Menu.Item onClick={this.handleToggle}>
<Icon name='sidebar' />
</Menu.Item>
</Menu>
</Container>
<GenericHeadingComponent mobile={mobile} />
</Segment>
{children}
</Sidebar.Pusher>
</Responsive>
)
}
}
MobileContainer.propTypes = {
children: PropTypes.node,
}
这个错误是在我的 <DesktopContainer/>
和 <MobileContainer/>
组件中引起的。
这些是错误:
index.js:1 The above error occurred in the <Link> component:
in Link
in Unknown (created by MobileContainer)
in div (created by Menu)
in Menu (created by Sidebar)
in RefFindNode (created by Ref)
in Ref (created by Sidebar)
in Sidebar (created by MobileContainer)
in div (created by SidebarPushable)
in SidebarPushable (created by Responsive)
in Responsive (created by MobileContainer)
in MobileContainer (created by LayoutComponent)
in LayoutComponent (created by Connect(LayoutComponent))
in Connect(LayoutComponent) (created by HomepageLayout)
in HomepageLayout (created by Connect(HomepageLayout))
in Connect(HomepageLayout) (created by Home)
in Home (created by Connect(Home))
in Connect(Home) (created by MyApp)
in PersistGate (created by MyApp)
in Provider (created by MyApp)
in MyApp (created by AppWithRedux)
in AppWithRedux
in Suspense (created by AppContainer)
in Container (created by AppContainer)
in AppContainer
VM451 main.js:12445 The above error occurred in the <Link> component:
in Link
in Unknown (created by DesktopContainer)
in div (created by Container)
in Container (created by DesktopContainer)
in div (created by Menu)
in Menu (created by DesktopContainer)
in div (created by Segment)
in Segment (created by DesktopContainer)
in div (created by Visibility)
in RefFindNode (created by Ref)
in Ref (created by Visibility)
in Visibility (created by DesktopContainer)
in div (created by Responsive)
in Responsive (created by DesktopContainer)
in DesktopContainer (created by LayoutComponent)
in LayoutComponent (created by Connect(LayoutComponent))
in Connect(LayoutComponent) (created by HomepageLayout)
in HomepageLayout (created by Connect(HomepageLayout))
in Connect(HomepageLayout) (created by Home)
in Home (created by Connect(Home))
in Connect(Home) (created by MyApp)
in PersistGate (created by MyApp)
in Provider (created by MyApp)
in MyApp (created by AppWithRedux)
in AppWithRedux
in Suspense (created by AppContainer)
in Container (created by AppContainer)
in AppContainer
VM453 dll_397dc449097af0b4e992.js:26942 Uncaught Invariant Violation: React.Children.only expected to receive a single React element child.
at http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:26942:26
at Object.onlyChild [as only] (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:26945:5)
at Link.render (http://localhost:8016/_next/static/development/pages/index.js?ts=1572206599026:25504:35)
at finishClassComponent (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:17380:31)
at updateClassComponent (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:17335:24)
at beginWork (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:18846:16)
at HTMLUnknownElement.callCallback (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:688:14)
at Object.invokeGuardedCallbackDev (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:738:16)
at invokeGuardedCallback (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:795:31)
at beginWork$ (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:23558:7)
at performUnitOfWork (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22549:12)
at workLoopSync (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22526:22)
at renderRoot (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22219:11)
at scheduleUpdateOnFiber (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:21760:22)
at scheduleRootUpdate (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:24660:3)
at updateContainerAtExpirationTime (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:24688:10)
at updateContainer (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:24777:10)
at http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:25304:7
at unbatchedUpdates (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22028:12)
at legacyRenderSubtreeIntoContainer (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:25303:5)
at Object.hydrate (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:25370:12)
at renderReactElement (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9362:26)
at _callee4$ (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9494:13)
at tryCatch (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:698:40)
at Generator.invoke [as _invoke] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:924:22)
at Generator.prototype.<computed> [as next] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:750:21)
at asyncGeneratorStep (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:226:24)
at _next (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:248:9)
at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:255:7
at new Promise (<anonymous>)
at new F (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:2352:28)
at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:244:12
at _doRender (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9508:20)
at doRender (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9437:20)
at _callee2$ (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9247:20)
at tryCatch (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:698:40)
at Generator.invoke [as _invoke] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:924:22)
at Generator.prototype.<computed> [as next] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:750:21)
at asyncGeneratorStep (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:226:24)
at _next (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:248:9)
at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:255:7
at new Promise (<anonymous>)
at new F (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:2352:28)
at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:244:12
at _render (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9268:18)
at render (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9219:18)
at _callee$ (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9200:13)
at tryCatch (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:698:40)
at Generator.invoke [as _invoke] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:924:22)
at Generator.prototype.<computed> [as next] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:750:21)
谁能发现我可以在哪里包装 <></>
来解决这个错误?
Link
from Next.js 期望 one children,如果提供多个 children 将抛出错误。
您可以用 a
标签包裹多个 children:
<Link href={route}>
<a>
{navItems.map(currentNavItem => (
<Menu.Item
key={currentNavItem}
name={name}
active={currentNavItem === selected ? true : false}
onClick={() => handleItemClick(currentNavItem)}>
{anchorText}
</Menu.Item>
))}
</a>
</Link>
if 在 next.js
中给出错误
<Link href="/"><a> Home </a></Link>
试试下面对我有用的方法
<Link href="/">
<a> Home </a>
</Link>
我正在尝试将一个函数传递给生成 menu
的子项认为我早些时候被卡住了,因为那个例子似乎有一个父子,而我的中间有一个 HOC:
var comparator;
const GenericIsUserLoggedInLink = React.memo(({ isHomeButton, isLoggedIn, logOutUser, route, anchorText, mobile, name, selected, handleItemClick }) => {
comparator = (prevProps, nextProps) => {
if (prevProps.isHomeButton !== nextProps.setProps.isHomeButton) {
return true;
}
if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
return true;
}
if (prevProps.mobile !== nextProps.setProps.mobile) {
return true;
}
if (prevProps.selected !== nextProps.setProps.selected) {
return true;
}
return false;
}
function currentNav(route, name, selected, anchorText, handleItemClick) {
const navItems = ['home', 'profile', 'dashboard'];
return (
<>
<Link href={route}>
{navItems.map(currentNavItem => (
<Menu.Item
key={currentNavItem}
name={name}
active={currentNavItem === selected ? true : false}
onClick={() => handleItemClick(currentNavItem)}>
{anchorText}
</Menu.Item>
))}
</Link>
</>
);
}
if (isHomeButton) {
return currentNav(route, name, selected, anchorText, handleItemClick)
}
if (isLoggedIn) {
if (anchorText === undefined) {
return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
}
else if (mobile) {
return currentNav(route, name, selected, anchorText, handleItemClick)
}
else if (!(mobile)) {
return currentNav(route, name, selected, anchorText, handleItemClick)
}
else if (anchorText) {
return <Link href={route}><a>{anchorText}</a></Link>
}
} else {
if (route === "/login") {
return <Link href="/login"><a>Log in!</a></Link>
}
return null
}
}, comparator);
class DesktopContainer extends Component {
state = {activeItem: 'home'}
hideFixedMenu = () => this.setState({ fixed: false })
showFixedMenu = () => this.setState({ fixed: true })
handleItemClick = (activeItem) => this.setState({ activeItem })
logOutUser = () => {
const { logOutUser } = this.props
logOutUser()
}
render() {
const { GenericHeadingComponent, children, getWidth, isLoggedIn, logOutUser } = this.props
const { fixed, activeItem } = this.state
return (
<Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>
<Visibility
once={false}
onBottomPassed={this.showFixedMenu}
onBottomPassedReverse={this.hideFixedMenu}
>
<Segment
inverted
textAlign='center'
style={{ minHeight: 700, padding: '1em 0em' }}
vertical
>
<Menu
fixed={fixed ? 'top' : null}
inverted={!fixed}
pointing={!fixed}
secondary={!fixed}
size='large'
>
<Container>
<GenericIsUserLoggedInLink
isHomeButton={true}
route="/"
name='home'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={false}
/>
<GenericIsUserLoggedInLink
isLoggedIn={isLoggedIn}
route="/profile"
anchorText="Profile"
name='profile'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={false}
/>
<GenericIsUserLoggedInLink
isLoggedIn={isLoggedIn}
route="/dashboard"
anchorText="Dashboard"
name='dashboard'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={false}
/>
<Menu.Item position='right'>
<Button inverted={!fixed}>
<GenericIsUserLoggedInLink
route="/login"
isLoggedIn={isLoggedIn}
logOutUser={logOutUser}
/>
</Button>
<Button inverted={!fixed} primary={fixed} style={{ marginLeft: '0.5em' }}>
<Link href="/register">
<a>Register</a>
</Link>
</Button>
</Menu.Item>
</Container>
</Menu>
<GenericHeadingComponent />
</Segment>
</Visibility>
{children}
</Responsive>
)
}
}
DesktopContainer.propTypes = {
children: PropTypes.node,
}
class MobileContainer extends Component {
state = { activeItem: 'home' }
handleSidebarHide = () => this.setState({ sidebarOpened: false })
handleToggle = () => this.setState({ sidebarOpened: true })
handleItemClick = (activeItem) => this.setState({ activeItem })
logOutUser = () => {
const { logOutUser } = this.props
logOutUser()
}
render() {
const { GenericHeadingComponent, children, getWidth, isLoggedIn, logOutUser, mobile } = this.props
const { sidebarOpened, activeItem } = this.state
return (
<Responsive
as={Sidebar.Pushable}
getWidth={getWidth}
maxWidth={Responsive.onlyMobile.maxWidth}
>
<Sidebar
as={Menu}
animation='push'
inverted
onHide={this.handleSidebarHide}
vertical
visible={sidebarOpened}
>
<GenericIsUserLoggedInLink
isHomeButton={true}
route="/"
name='home'
anchorText="Home"
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={true}
/>
<GenericIsUserLoggedInLink
isLoggedIn={isLoggedIn}
route="/profile"
anchorText="Profile"
name='profile'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={true}
/>
<GenericIsUserLoggedInLink
isLoggedIn={isLoggedIn}
route="/dashboard"
anchorText="Dashboard"
name='dashboard'
selected={activeItem}
handleItemClick={this.handleItemClick}
mobile={true}
/>
<Menu.Item>
<GenericIsUserLoggedInLink
route="/login"
isLoggedIn={isLoggedIn}
logOutUser={logOutUser}
/>
</Menu.Item>
<Menu.Item >
<Link href="/register">
<a>Register</a>
</Link>
</Menu.Item>
</Sidebar>
<Sidebar.Pusher dimmed={sidebarOpened}>
<Segment
inverted
textAlign='center'
style={{ minHeight: 350, padding: '1em 0em' }}
vertical
>
<Container>
<Menu inverted pointing secondary size='large'>
<Menu.Item onClick={this.handleToggle}>
<Icon name='sidebar' />
</Menu.Item>
</Menu>
</Container>
<GenericHeadingComponent mobile={mobile} />
</Segment>
{children}
</Sidebar.Pusher>
</Responsive>
)
}
}
MobileContainer.propTypes = {
children: PropTypes.node,
}
这个错误是在我的 <DesktopContainer/>
和 <MobileContainer/>
组件中引起的。
这些是错误:
index.js:1 The above error occurred in the <Link> component:
in Link
in Unknown (created by MobileContainer)
in div (created by Menu)
in Menu (created by Sidebar)
in RefFindNode (created by Ref)
in Ref (created by Sidebar)
in Sidebar (created by MobileContainer)
in div (created by SidebarPushable)
in SidebarPushable (created by Responsive)
in Responsive (created by MobileContainer)
in MobileContainer (created by LayoutComponent)
in LayoutComponent (created by Connect(LayoutComponent))
in Connect(LayoutComponent) (created by HomepageLayout)
in HomepageLayout (created by Connect(HomepageLayout))
in Connect(HomepageLayout) (created by Home)
in Home (created by Connect(Home))
in Connect(Home) (created by MyApp)
in PersistGate (created by MyApp)
in Provider (created by MyApp)
in MyApp (created by AppWithRedux)
in AppWithRedux
in Suspense (created by AppContainer)
in Container (created by AppContainer)
in AppContainer
VM451 main.js:12445 The above error occurred in the <Link> component:
in Link
in Unknown (created by DesktopContainer)
in div (created by Container)
in Container (created by DesktopContainer)
in div (created by Menu)
in Menu (created by DesktopContainer)
in div (created by Segment)
in Segment (created by DesktopContainer)
in div (created by Visibility)
in RefFindNode (created by Ref)
in Ref (created by Visibility)
in Visibility (created by DesktopContainer)
in div (created by Responsive)
in Responsive (created by DesktopContainer)
in DesktopContainer (created by LayoutComponent)
in LayoutComponent (created by Connect(LayoutComponent))
in Connect(LayoutComponent) (created by HomepageLayout)
in HomepageLayout (created by Connect(HomepageLayout))
in Connect(HomepageLayout) (created by Home)
in Home (created by Connect(Home))
in Connect(Home) (created by MyApp)
in PersistGate (created by MyApp)
in Provider (created by MyApp)
in MyApp (created by AppWithRedux)
in AppWithRedux
in Suspense (created by AppContainer)
in Container (created by AppContainer)
in AppContainer
VM453 dll_397dc449097af0b4e992.js:26942 Uncaught Invariant Violation: React.Children.only expected to receive a single React element child.
at http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:26942:26
at Object.onlyChild [as only] (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:26945:5)
at Link.render (http://localhost:8016/_next/static/development/pages/index.js?ts=1572206599026:25504:35)
at finishClassComponent (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:17380:31)
at updateClassComponent (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:17335:24)
at beginWork (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:18846:16)
at HTMLUnknownElement.callCallback (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:688:14)
at Object.invokeGuardedCallbackDev (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:738:16)
at invokeGuardedCallback (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:795:31)
at beginWork$ (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:23558:7)
at performUnitOfWork (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22549:12)
at workLoopSync (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22526:22)
at renderRoot (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22219:11)
at scheduleUpdateOnFiber (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:21760:22)
at scheduleRootUpdate (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:24660:3)
at updateContainerAtExpirationTime (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:24688:10)
at updateContainer (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:24777:10)
at http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:25304:7
at unbatchedUpdates (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:22028:12)
at legacyRenderSubtreeIntoContainer (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:25303:5)
at Object.hydrate (http://localhost:8016/_next/static/development/dll/dll_397dc449097af0b4e992.js?ts=1572206599026:25370:12)
at renderReactElement (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9362:26)
at _callee4$ (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9494:13)
at tryCatch (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:698:40)
at Generator.invoke [as _invoke] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:924:22)
at Generator.prototype.<computed> [as next] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:750:21)
at asyncGeneratorStep (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:226:24)
at _next (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:248:9)
at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:255:7
at new Promise (<anonymous>)
at new F (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:2352:28)
at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:244:12
at _doRender (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9508:20)
at doRender (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9437:20)
at _callee2$ (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9247:20)
at tryCatch (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:698:40)
at Generator.invoke [as _invoke] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:924:22)
at Generator.prototype.<computed> [as next] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:750:21)
at asyncGeneratorStep (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:226:24)
at _next (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:248:9)
at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:255:7
at new Promise (<anonymous>)
at new F (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:2352:28)
at http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:244:12
at _render (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9268:18)
at render (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9219:18)
at _callee$ (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:9200:13)
at tryCatch (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:698:40)
at Generator.invoke [as _invoke] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:924:22)
at Generator.prototype.<computed> [as next] (http://localhost:8016/_next/static/runtime/main.js?ts=1572206599026:750:21)
谁能发现我可以在哪里包装 <></>
来解决这个错误?
Link
from Next.js 期望 one children,如果提供多个 children 将抛出错误。
您可以用 a
标签包裹多个 children:
<Link href={route}>
<a>
{navItems.map(currentNavItem => (
<Menu.Item
key={currentNavItem}
name={name}
active={currentNavItem === selected ? true : false}
onClick={() => handleItemClick(currentNavItem)}>
{anchorText}
</Menu.Item>
))}
</a>
</Link>
if 在 next.js
中给出错误 <Link href="/"><a> Home </a></Link>
试试下面对我有用的方法
<Link href="/">
<a> Home </a>
</Link>