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。当您使用linkParams（DList）时，您需要将<DList linkParams={/*...*/} />作为属性传递，或者如果没有render属性，则需要linkParams处理它。< / p>

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

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

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

1 个答案: