Question

所以我有这个json文件 info.json

{
    "experience":[
        {
            "title":"Pratt & Whitney Canada",
            "date":"September 2015 - December 2015"
        }
    ]
}

然后我有我的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './main';
import Info from './info';

ReactDOM.render(
  <Main info={Info}/>,
  document.getElementById('root')
);

然后在我的main.js

里面

import React from 'react';
import Title from './title';

    const Main = () => (
        <Title Info={this.props.info.experience}/>
    );

    Main.propTypes = {

    }
    export default Main;

所以当它得到渲染时我得到以下错误：

Uncaught TypeError: Cannot read property 'props' of undefined

基本上我想做的是一种获取我的json文件中的值的方法，将它传递给我的index.js，以便我可以在不同的组件中使用它。

编辑：title.js

import React from 'react';
import './style.css'
const Title = (props) => (
  <div className="pos_left">
    <p className="titles">Someone</p>
    <p className="subtitles">3rd Year Software Engineer |  something</p> 
    <p>{props.data.experience}</p>
  </div>
  );

export default Title;

我遇到的问题是没有显示任何内容或者我应该做<p> {props.where} </p>

Answer 1

它抛出此错误的原因是因为您正在尝试使用功能组件。

虽然类组件自动了解props（和state使用this），但功能组件却不知道。

如果要在功能组件中使用props，则需要传递props这样的参数：

const Main = (props) => (
  <Title Info={props.info.experience} />
);

（More information about class and functional components on React documentation）

Reactjs获取json数据

1 个答案: