Javascript 您的呈现方法应该有return语句吗？ 类应用程序扩展了React.Component{ render（）{ productList.map（（产品）=>{ 返回( {product.title} {product.type} {product.producer} {product.unit} {产品价格} ); }); } } 导出默认应用程序；

我做错了什么？

错误表明，渲染函数中没有返回任何内容。如果您在react的v16或更高版本上，返回映射结果将解决问题

class App extends React.Component {


  render() {

    productList.map((product) => {

      return (
        <div className="mainContainer">
          <div className="titel">{product.title}</div>
          <div className="type">{product.type}</div>
          <div className="producer">{product.producer}</div>
          <div className="unit">{product.unit}</div>

          <div className="prisContainer">
            <div className="pris">{product.price}</div>
          </div>

        </div>
      );
    });
  }
}


export default App;

类应用程序扩展了React.Component{
render（）{
返回productList.map（（产品）=>{
返回(
{product.title}
{product.type}
{product.producer}
{product.unit}
{产品价格}
);
});
}
}
导出默认应用程序；

如果您使用的是较低版本，请将map函数的结果包装在div中

class App extends React.Component {


  render() {

    return productList.map((product) => {

      return (
        <div className="mainContainer">
          <div className="titel">{product.title}</div>
          <div className="type">{product.type}</div>
          <div className="producer">{product.producer}</div>
          <div className="unit">{product.unit}</div>

          <div className="prisContainer">
            <div className="pris">{product.price}</div>
          </div>

        </div>
      );
    });
  }
}


export default App;

render（）{
返回{productList.map（（产品）=>{
返回(
{product.title}
{product.type}
{product.producer}
{product.unit}
{产品价格}
);
})}
}

正如错误所述，您不会从渲染函数中返回任何内容。如果您在react的v16或更高版本上，返回映射结果将解决问题

class App extends React.Component {


  render() {

    productList.map((product) => {

      return (
        <div className="mainContainer">
          <div className="titel">{product.title}</div>
          <div className="type">{product.type}</div>
          <div className="producer">{product.producer}</div>
          <div className="unit">{product.unit}</div>

          <div className="prisContainer">
            <div className="pris">{product.price}</div>
          </div>

        </div>
      );
    });
  }
}


export default App;

类应用程序扩展了React.Component{
render（）{
返回productList.map（（产品）=>{
返回(
{product.title}
{product.type}
{product.producer}
{product.unit}
{产品价格}
);
});
}
}
导出默认应用程序；

如果您使用的是较低版本，请将map函数的结果包装在div中

class App extends React.Component {


  render() {

    return productList.map((product) => {

      return (
        <div className="mainContainer">
          <div className="titel">{product.title}</div>
          <div className="type">{product.type}</div>
          <div className="producer">{product.producer}</div>
          <div className="unit">{product.unit}</div>

          <div className="prisContainer">
            <div className="pris">{product.price}</div>
          </div>

        </div>
      );
    });
  }
}


export default App;

render（）{
返回{productList.map（（产品）=>{
返回(
{product.title}
{product.type}
{product.producer}
{product.unit}
{产品价格}
);
})}
}

我将创建一个单独的变量来运行映射并返回内容，然后在渲染中的return语句中添加该变量

render() {

    return <div>{productList.map((product) => {

      return (
        <div className="mainContainer">
          <div className="titel">{product.title}</div>
          <div className="type">{product.type}</div>
          <div className="producer">{product.producer}</div>
          <div className="unit">{product.unit}</div>

          <div className="prisContainer">
            <div className="pris">{product.price}</div>
          </div>

        </div>
      );
    })}<div>
  }

render（）{
返回(
{content}
)
}

我将创建一个单独的变量来运行映射并返回内容，然后在渲染中的return语句中添加该变量

render() {

    return <div>{productList.map((product) => {

      return (
        <div className="mainContainer">
          <div className="titel">{product.title}</div>
          <div className="type">{product.type}</div>
          <div className="producer">{product.producer}</div>
          <div className="unit">{product.unit}</div>

          <div className="prisContainer">
            <div className="pris">{product.price}</div>
          </div>

        </div>
      );
    })}<div>
  }

render（）{
返回(
{content}
)
}