Next.js - 无法读取未定义的属性“地图”

Question

我知道关于这个错误有很多问题，我已经完成了所有我能找到的。

我认为这可能与缺少 getInitialState 有关，但我不确定如何实现它。

我正在尝试在文件夹中创建文本文件的动态列表，通过 frontMatter 模块从文件本身中提取信息。

import React from 'react'
import frontMatter from 'front-matter'
import fs from 'fs'

import { getFileList } from '../util/utils'

export default class DList extends React.Component {
  static async getInitialProps () {

    return getFileList('./static/filecontainer/').then((files) => {
      const linkParams = files.nameList.map((fileName, i) => {
        const content = fs.readFileSync(files.pathList[i], 'utf-8')
        const meta = frontMatter(content)
        return {
          name: fileName,
          title: meta.attributes.title,
          date: meta.attributes.date,
          description: meta.attributes.description,
        }
      })
      return {
        linkParams: linkParams
      }
    })
  }

    render () {
      return (
        <div id="listContainer">
            {
              this.props.linkParams.map((el, i) => {
                return (
                  <div className="itemBlock">
                    <div id="nameBlock"><div id='tFileTitle'>{el.title}</div><div id='tFileDate'>{el.date}</div></div>
                    <div id="descriptBlock"><p className='tFileInfo'>{el.description}</p></div>
                  </div>
                )
              })
            }
        </div>
      )
    }
  }

这是getFileList 函数：

import yaml from 'js-yaml'

export async function getFileList (dirname) {
  return new Promise((resolve, reject) => {
    fs.readdir (dirname, (error, files) => {
      if (error) {
        reject(error);
      } else {
        files.reverse()
        resolve({
          pathList: files.map( el => dirname + el ),
          nameList: files.map( el => el.slice(0, -3) )
        })
      }
    })
  })
}

所以我的想法是创建一个小框来显示所有信息，然后我可以将这些信息导入到主页上它自己的 div 中。

import Header from '../components/Header'
import DList from '../components/DList'

export default () => (
  <div>
    <Header />
    <div id="contentWrap">
      <div id="leftContent"><DList /></div>
      <div id="rightContent"></div>
    </div>
  </div>
)

Answer 1

您的 DList render 函数正在使用 this.props.linkParams.map。您对DList 的使用 只是<DList />，它根本没有设置任何属性，所以this.props.linkParams 是undefined。当您使用DList (<DList linkParams={/*...*/} />) 时，您需要将linkParams 作为属性传递，或者如果没有linkParams 属性，则让render 处理它。

我认为这可能与缺少 getInitialState 有关

不，状态和属性是不同的东西。 state 是组件的状态，由组件管理。 props 是用户传递给组件的属性。