レンダリングマップが画面にデータを表示しない

Question

renderJobマッピングが適切にレンダリングされないようです。私はコンソールに何の誤りもなく、何も表示されていない間は分からない。オブジェクトをインデックスにマッピングする方法に問題はありますか？あなたはmap結果を変数renderJobにおける基本的arrayを記憶している

import React, { Component } from 'react' 
import PropTypes from 'prop-types' 


const jbSampleData = [ 
    { 
     name: 'A place', 
     location: 'USA', 
     engineer: "Contact Engineer", 
     service: "Last install" 
    }, 
] 

class Job extends Component { 
    render() { 

     const renderJob = this.props.data.map((obj, idx) => { 
      return (
       <div key={idx}> 
        <div> 
         <p> 
          <span>Name:</span> {obj.name} < br/> 
          <span>Location:</span> {obj.location} <br /> 
          <span>Engineer Contact:</span> {obj.engineer} <br /> 
          <span>Service:</span> {obj.service} <br /> 
         </p> 
        </div> 
       </div> 
      ); 
     }); 

     return (
      <div> 
       <renderJob /> 
       Hello 
      </div> 
     ) 
    } 
} 


Job.propTypes = { 
    data: PropTypes.arrayOf(
     PropTypes.object 
    ) 
} 

Job.defaultProps = { 
    data: jbSampleData 
} 
export default Job; 

Answer 1

から<renderJob />変化、すなわち、反応の構成要素ではありません。

return (
    <div> 
     {renderJob} 
     Hello 
    </div> 
) 

は基本的に<renderJob>が変換を取得します：

React.createElement(renderJob, null); //new custom element 

しかし{renderJob}の場合には、その値が置き換えられてしまいますし、そのすべてのUIアイテムあなたはこのようにそれをレンダリングする必要がある

変数はレンダリングされます。

<renderJob/>でエラーが表示されないのはなぜですか？

名は、それがあなたが<RenderJob/>を使用する場合には、エラーがスローされます、DIVなどのような組み込みコンポーネントとしてみなされますので、小さな文字で記載されているのでそのRenderJob is not defined.

としてDOCあたり：

エレメントタイプが小文字で始まる場合、または<span>のような組み込みコンポーネント を参照し、結果は文字列 'div' または 'span'がReact.createElementに渡されました。 <Foo />のような 大文字で始まるタイプはReact.createElement（フー）とあなたのJavaScriptファイルで定義されているか、輸入部品へ 対応するようにコンパイルします。私が使用しているので、しばらくして反応し、何らかの理由でコンポーネントとして扱わ -

Answer 2

代わりの{renderJob}