Question

我正在尝试使用graphiQL调用请求，但是它有问题。有人可以帮助我吗？我收到此错误：“ TypeError：menuLinks.map不是函数”-它正在gatsby / react上运行

import React from "react"
import { graphql, StaticQuery, Link } from "gatsby"
import { Menu } from "antd"
import headerStyles from "./headerStyles.module.scss"

class Header extends React.Component {
  render() {
    const menuLinks = props.data.site.siteMetadata
    return (
      <StaticQuery
        query={graphql`
          query SiteTitleQuery {
            site {
              siteMetadata {
                menuLinks {
                  name
                  link
                }
              }
            }
          }
        `}
        render={data => (
          <div data={data} className={headerStyles.menu}>
            <Link to="/">
              <img
                style={{ width: "30px", float: "left" }}
              />
            </Link>
            <Menu mode="horizontal" breakpoint="lg" collapsedWidth="0">
              {menuLinks.map(link => (
                <Menu.Item key={link.name}>
                  <Link to={link.link}>{link.name}</Link>
                </Menu.Item>
              ))}
            </Menu>
          </div>
        )}
      />
    )
  }
}
export default Header

Answer 1

const menuLinks = this.props.data.site.siteMetadata

代替

const menuLinks = props.data.site.siteMetadata

如何获得反应中的道具，您可以检查此props

基于类的组件

this.props.data

基于功能的组件中

props.data

Answer 2

您应该使用this.props.data.site.siteMetadata而不是props.data.site.siteMetadata，因为您使用的是Class组件。

在这些情况下，事情可能会出错。您必须检查componentDidMount或render中是否存在data, site, and siteMetadata。很可能在第一个渲染中您的props.data.site.siteMetadata可能不存在。

将映射更改为此代码。

{
this.props.data 
&& this.props.data.site 
&& this.props.site.siteMetadata 
&& this.props.site.siteMetadata.length > 0 
? this.props.site.siteMetadata.map(each => <MenuItem />) 
: <Loading />
}

menuLinks.map不是函数

2 个答案: