ブラウザでjsonデータを表示できません

Question

jsonデータを含むtestdata.jsonファイルがあります。下記のコードを実行しようとすると、「有効なReact要素（またはnull）を返す必要があります。定義されていない、配列またはその他の無効なオブジェクトを返しました。 "私は今どうすればいい？

これはcontestpreview.jsファイルです：

import React from 'react'; 

const ContestPreview = (contest) => { 
    <div className = "contestPreview"> 
    <div> 
     {contest.categoryName} 
    </div> 
    <div> 
     {contest.contestName} 
    </div> 
    </div> 
}; 
export default ContestPreview; 

この私のapp.jsファイル：

import React from'react'; 
import ReactDom from 'react-dom'; 
import data from './testData'; 
console.log(data); 
import App from './components/App'; 

ReactDom.render(
    <App contest = {data.contest}/>, 
    document.getElementById('root') 
); 

Answer 1

あなたContentPreviewコンポーネントが反応返さない：

import React from 'react'; 
import Header from './Header'; 

import ContestPreview from './ContestPreview'; 
class App extends React.Component {  
    state= { test : 7}; 
    render(){ 
    return(<div> 
     <div> 
     <Header message = "Naming contests"/> 
     </div> 
     <div>  
     <ContestPreview {...this.props.contests}/> 
     </div> 
    </div> 
); 
    } 
}; 

export default App; 

これは私のindex.jsファイルです成分。これは小さなエラーですが、returnステートメントを追加するか、かっこで中かっこを置き換えることでこれを修正できます。そのよう

：

const ContestPreview = (contest) => (
    <div className = "contestPreview"> 
    <div> 
     {contest.categoryName} 
    </div> 
    <div> 
     {contest.contestName} 
    </div> 
    </div> 
); 
export default ContestPreview; 

または

const ContestPreview = (contest) => { 
    return (
    <div className = "contestPreview"> 
     <div> 
     {contest.categoryName} 
     </div> 
     <div> 
     {contest.contestName} 
     </div> 
    </div> 
); 
}; 
export default ContestPreview; 

後者は（落胆が）したい場合は、復帰前にいくつかのアプリケーションロジックを追加することができます。

---

あなたはステートレスな機能コンポーネントを使用しているので、あなたはこれらの面白いの長所/短所で私previous answerを見つけることができます。

幸運を祈る！