Question

我有包含json数据的testdata.json文件，当我尝试执行下面的代码时，我得到一个错误，因为＆＃34;必须返回一个有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象＆＃34;。我现在该怎么办？

这是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 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文件：

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

您的return组件未返回React组件。这是您的一个小错误，但您可以通过添加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;

或

{{1}}

后者允许您在返回之前添加一些应用程序逻辑，如果您愿意（尽管不鼓励）。

由于您正在使用无状态功能组件，因此您可能会发现previous answer这些有趣的优缺点。
祝你好运！

无法在浏览器上显示json数据

1 个答案: