Question

我在Next.js上编写应用程序。我从API获取数据。当我点击页面“关于”（下面）我有错误：无法读取未定义的属性'map'，但是当我重新启动此页面时 - 它的工作原理。我怎么能避免这个错误？

import React from 'react'
import Header from './Header'
import Link from 'next/link'
import axios from 'axios';

export default class extends React.Component {
  static async getInitialProps () {
    if(!process.browser) {
      const res = await axios.get('https://api.themoviedb.org/3/movie/popular?api_key=2cdce3bbe05c745f380ca0af5874a2d8&language=en-US&page=1')
      return {data: res.data}
    } else {
      return {data: JSON.parse(sessionStorage.getItem('bpl'))}
    }
  }

  componentDidMount () {
    if(!sessionStorage.getItem('bpl')) sessionStorage.setItem('bpl', JSON.stringify(this.props.data))
  }
  render () {

    return (
      <div>
        <Header />

        <div className="pure-g">
            <div className="pure-u-1-3"></div>
            <div className="pure-u-1-3">
              <h1>TOP Movies 2017</h1>

              <table className="pure-table">
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Popularity</th>
                    <th>Overview</th>
                  </tr>
                </thead>
                <tbody>
                {this.props.data.results.map((results, id) => {

                  return (
                      <tr key={id} >
                        <td className="title"><p className="title_sign">{results.title}</p></td>
                        <td>{results.popularity}</td>
                        <td>{results.overview}</td>
                      </tr>
                    );
                })}
                </tbody>
              </table>
            </div>
            <div className="pure-u-1-3"></div>
        </div>
        <style jsx>{`
        h1 {
            text-align: center;
            margin-top: 40px;
            color: grey;
        }
      .title {
        width: 180px;
      }
      .title_sign {
        font-weight: 600;
      }
      th {
        color: grey;
      }
    `}</style>
      </div>
    );
  }
}

Answer 1

我不确定为什么要将收到的数据存储在道具中。道具应该是静态的，并从父组件传递下来。如果您的组件正在根据收到的数据更改可视化表单，那么您可以将其存储在状态中。组件无法修改自己的道具。我看到的是你正在尝试更新组件的道具。最好为接收的数据设置状态。并使用state迭代render方法。

确保使用“object＆amp;＆amp;”在javascript对象上使用地图。

无法读取未定义的属性“map”（Next.js）

1 个答案: