React/Next - 使用动态数据生成状态的正确方法

Question

我正在尝试从文件列表中提取元数据并将它们显示在 div 中。元数据包含在文本文件中，并使用 front-matter 模块收集。

仍在学习 React，不确定创建状态的正确方法是什么。 任何帮助，将不胜感激。

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

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

export default class TheFileList extends React.Component {
  constructor(props) {
    super(props);
    this.state = 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="fileDumpContainer">
          {
            this.state.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>
    )
  }
  }

实用功能：

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) )
        })
      }
    })
  })
}

这是我得到的错误：

Cannot read property 'map' of undefined

TypeError: Cannot read property 'map' of undefined
    at TheFileList.render (C:\reactApp\.next\dist\components\TheFileList.js:84:31)
    at C:\reactApp\node_modules\react-dom\lib\ReactCompositeComponent.js:796:21
    at measureLifeCyclePerf (C:\reactApp\node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (C:\reactApp\node_modules\react-dom\lib\ReactCompositeComponent.js:795:25)
    at ReactCompositeComponentWrapper._renderValidatedComponent (C:\reactApp\node_modules\react-dom\lib\ReactCompositeComponent.js:822:32)
    at ReactCompositeComponentWrapper.performInitialMount (C:\reactApp\node_modules\react-dom\lib\ReactCompositeComponent.js:362:30)
    at ReactCompositeComponentWrapper.mountComponent (C:\reactApp\node_modules\react-dom\lib\ReactCompositeComponent.js:258:21)
    at Object.mountComponent (C:\reactApp\node_modules\react-dom\lib\ReactReconciler.js:46:35)
    at ReactDOMComponent.mountChildren (C:\reactApp\node_modules\react-dom\lib\ReactMultiChild.js:238:44)
    at ReactDOMComponent._createContentMarkup (C:\reactApp\node_modules\react-dom\lib\ReactDOMComponent.js:653:32)

Answer 1

尝试在您的渲染函数中添加检查以查看是否存在 linkParams。通常适用于应用程序级状态（redux）

 render () {
  if(!linkParams){
    return <div>Loading</div>
  } else {
    return (
      <div id="fileDumpContainer">
          {
            this.state.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>
              )
            })  }
  }