React組件導入靜態json文件

Question

我正在導入這樣的json文件：

import React from 'react';
import Test1 from './test1.jsx';
import data from './data.json';


class TestWrapper extends React.Component {
  render () {
    return (
      <div>
        <h2>Projects</h2>
        <Test1 projects={data} />
      </div>
    );
  }
}

export default TestWrapper;

然后我嘗試在以下方面使用它：

import React from 'react';

class Test1 extends React.Component {
  render () {
    var rows = [];
    this.props.projects.map(function(el){
       rows.push(<p key={el}>{el}</p>);
    });
    return (
      <div>
        <h2>Test 1</h2>
        {rows}
      </div>
    );
  }
}

export default Test1;

這是我的data.json

{
  "projects": [
    "title1",
    "title2",
    "title3",
    "title4"
  ]
}

我收到以下錯誤：

未捕獲的TypeError：this.props.projects.map不是函數

我需要解析我的json文件嗎？

Answer 1

否，但是this.props.projects將包含JSON數據，因此您需要執行以下操作：

this.props.projects.projects.map

Answer 2

您在json對象{projects: []}擁有一個projects屬性。 因此，您必須執行this.props.projects.projects.map

Answer 3

使用ES6解構，您可以從json導入中檢索和分配projects值。

import { projects } from './data.json';