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

Posted 2023-02-23

【中文标题】React：组件和数组的条件渲染

【英文标题】：React: Conditional Rendering Of Components And Arrays

【发布时间】：2017-12-16 04:59:45

【问题描述】：

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

1
2
3
4
5

但是我得到了这个错误：

警告：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>
    )
  

【参考方案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>;
    );