反应中未定义的道具变量

Question

我是新的反应和尝试访问json数据从一个文件使用道具。

Header.js

import React from 'react';
export const Header = props => (
<div className="curator-info col-lg-8 col-md-8 padLeft">
   <p><span id="curator-info-tagline">List Curated by:</span><br/>
   <span id="curator-info-name">{props.user_first_name} {props.user_middle_name} {props.user_surname}
   </span></p>
</div>      
);
export default Header;

restraunts.js

const restraunts = [
{  
    id:12,
    user_first_name:'Illias',
    user_middle_name:'',
    user_surname:'Dcruze',
},
];
export default restraunts;

Layout.js

import React from 'react';
import { Link } from 'react-router-dom';
import Header from '../Header/Header';
import Footer from '../Footer/Footer';
import restraunts from '../../data/restraunts.js';

export const Layout = props => (
<div className="app-container">
<Header />
<Footer />
</div>
);

export default Layout;

在我阅读的某个地方获取组件挂载函数中的数据，但我想只有使用react.component创建类才有可能。

与其他选项一起尝试了这一点：

In header.js
export const Header = ({restraunts}) => (

In Layout.js
< Header restraunts={restraunts} />

查询: 1)这里应该打印props.user_first_name，但是我在前端没有定义(不是未定义的错误，而是span标记是空的)。

编辑1:正如答案中所建议的，我应该循环。当在Layout.js文件中调用道具时，我发现它也应该作为参数传递。

Answer 1

您应该循环遍历restraunts数组以显示每个数组及其值。

Header.js

import React from 'react';
export const Header = props => (
<div className="curator-info col-lg-8 col-md-8 padLeft">
   <p><span id="curator-info-tagline">List Curated by:</span><br/>
   {props.restraunts.map((restaurant, index) => 
       <span key={index} id="curator-info-name">{restaurant.user_first_name} {restaurant.user_middle_name} {restaurant.user_surname}
       </span>
   )}</p>
</div>      
);
export default Header;