從JSON.file獲取嵌套數據中的問題

Question

我有這個db.json文件，我只想在屏幕上顯示年份。 如：1999、2000、2001等。

JSON文件：

  {
   "cronology":
      [   
           {
             "year": "1999",
             "description": "This is a description text"  
           },
           {
            "year": "2000",
            "description": "This is a description text"
           },
           {
            "year": "2001",
            "This is a description text"
           },
           {
            "year": "2002",
            "This is a description text"
        }
      ]
    }

我已經嘗試過這種方式，如何在下面的此React組件中看到它，但對我而言不起作用。

React Component文件：

import React, { Component } from 'react'
import { Scrollbars } from 'react-custom-scrollbars'

var data = require('./db.json');

class Cronology extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cronology: [],
      year: "",
      description: ""
    }
  }

  componentDidMount() {
    this.setState({
      cronology: data.cronology

    })
  }

  render() {
    return (
      <ul>
        {
          Objct.keys(this.state.cronology).map(
            (i) => {
              return <li>i.year</li>
          })                  
        }
      </ul>            
   }
}

export default Cronology;

屏幕上沒有顯示任何渲染的數據，也沒有任何錯誤消息。 我該如何解決？

Answer 1

僅使用地圖

render() {

  const cronology = this.state.cronology || []; // validate cronology

  return (
    <ul>
      {
        cronology.map(
        (i) => {
          return <li>i.year</li>
      })                  
    }
  </ul>            
}