0
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;

我究竟做错了什么?

4

2 回答 2

2

正如错误所述,您没有从渲染函数中返回任何内容。如果您使用的是 v16 或更高版本的 react,则返回映射结果将解决问题。

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>
  }
于 2020-09-09T10:33:12.190 回答
0

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

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

于 2020-09-09T14:04:29.017 回答