您的render方法应该有return语句吗？

问题描述

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;

我在做什么错了？

解决方法

由于错误状态，您没有从render函数中返回任何内容。如果您使用的是v16或更高版本，返回映射结果将解决问题。

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;

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

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的return语句中

render() {
return (
 <div> {content} </div>
 )
}