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

【问题标题】：React: Conditional Rendering Of Components And ArraysReact：组件和数组的条件渲染
【发布时间】：2017-12-16 04:59:45
【问题描述】：

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

但是我得到了这个错误：

警告：Charts(...)：必须返回有效的 React 元素（或 null）。您可能返回了未定义、数组或其他一些无效对象。

我怎样才能做到这一点？

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>
    )
  }
}

【问题讨论】：

标签： javascript html reactjs components jsx

【解决方案1】：

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

Charts(...)：必须返回一个有效的 React 元素（或 null）。您可能返回了未定义、数组或其他一些无效对象。

if (myCharts.length > 0) {

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

  }
  else {
     return <NoCharts />;
  }
}

这是codepen 上的工作应用程序。

【讨论】：

【解决方案2】：

您需要返回 myCharts。目前你只在数组为空时返回一些东西。

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

【讨论】：