Property'text'：在Next.js中未定义

Question

我尝试从API提取数据，并尝试在功能组件中显示它时出错。

标题代码：

Header.getInitialProps = async ({ req, query }) => {
  const protocol = req
    ? `${req.headers['x-forwarded-proto']}:`
    : location.protocol
  const host = req ? req.headers['x-forwarded-host'] : location.host
  const pageRequest = `${protocol}//${host}/api/announcements/announcement?id=1`
  const res = await fetch(pageRequest)
  const json = await res.json()
  return json
}

function Header({ ad }) {
  return (
    <Row>
      <Sheet>
        <SheetHeader>Ogłoszenia</SheetHeader>
        <Row alignCenter={true} width="200%" paddingTop="30px">
          {ad.text}
        </Row>
      </Sheet>
    </Row>
  )
}

API代码：

const db = require('../../lib/db')
const escape = require('sql-template-strings')

module.exports = async (req, res) => {
  const ads = await db.query(escape`
    SELECT *
    FROM announcements
    ORDER BY id
    DESC
  `)
  res.status(200).json({ ads })
}

已部署，它显示500内部服务器错误，是这样：https://core.mdcholewka.now.sh

Answer 1

我从getInitialProps切换到异步componentDidMount（）并开始工作！

class Header extends Component {
  constructor(props) {
    super(props)
    this.state = { json: {} }
  }

  async componentDidMount () {
    const pageRequest = `https://core.mdcholewka.now.sh/api/announcements`
    const res = await fetch(pageRequest)
    const json = await res.json()
    this.setState({ data: json })
  }

  render() {
    return ( 
      <Row>
        <Sheet>
          <SheetHeader>Ogłoszenia</SheetHeader>
          <Row alignCenter={true} width="200%" paddingTop="30px">
            {this.state.data.map(ad => {
              {ad.text}
            })}
          </Row>
        </Sheet>
      </Row>  
    )
  }
}