javascript - 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;

这是我的数据.json

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

我收到以下错误:

未捕获的类型错误:this.props.projects.map 不是一个函数

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

Answer 1

不，但是 this.props.projects 将包含 JSON 数据，因此您需要执行以下操作:

this.props.projects.projects.map