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属性。因此你必须这样做.props.projects.projects.map

Answer 3

使用ES6 destructuring，您可以从json导入中检索并分配projects值。

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

React组件导入静态json文件

3 个答案: