阵营组件进口静态JSON文件

Question

我导入JSON文件是这样的：

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

：

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; 

这我然后尝试使用它

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

我收到以下错误：

Uncaught TypeError：this.props.projects.map不是函数

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

Answer 1

没有，但this.props.projects将包含JSON数据，所以你需要做的：

this.props.projects.projects.map 

Answer 2

你有JSON对象{projects: []}内的项目属性。因此你必须这样做.props.projects.projects.map

Answer 3

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

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