Question

在这里，我尝试将数组中的每个项目作为h1返回，因此打印到屏幕应如下所示：

但是我收到了这个错误：

警告：图表（...）：必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。

我怎样才能做到这一点？

import React from 'react';

function NoCharts(props) {
  return <h1>No charts</h1>;
}

function Charts(props) {
  const myCharts = props.myCharts;
  if (myCharts.length > 0) {

    myCharts.forEach(function(chart) {
        return <h1>{chart}</h1>;
    });

  }
  return <NoCharts />;
}


export default class App extends React.Component {

  render() {

      let arr = [1,2,3,4,5];

    return (
      <div>

        <Charts myCharts={arr} />

      </div>
    )
  }
}

Answer 1

您必须“返回”有效的React元素，如错误所示 -

图表（...）：必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。

if (myCharts.length > 0) {

    const charts = myCharts.map(function(chart) {
        return <h1>{chart}</h1>;
    });
    return <div>{charts}</div>

  }
  else {
     return <NoCharts />;
  }
}

这是codepen上的工作应用。

Answer 2

您需要返回myCharts。目前，当数组为空时，您只返回一些内容。

    return myCharts.forEach(function(chart) {
      return <h1>{chart}</h1>;
    });

React：组件和数组的条件渲染

2 个答案: