獲得預期的賦值或函數調用，而是在嘗試在 React 中呈現組件時看到表達式 no-unused-expressions 錯誤

Question

我正在嘗試根據items對象中的items數呈現Card組件，但在第 6 行出現錯誤。

import React from "react";
    export class Cards extends React.Component {
      render() {
        let elements = [];
        elements = this.props.items.map(item => {
          <Card titles = {item.title} imgsrc = {item.urlToImage}
          discr = {item.description} urls = {item.url}
          />
        })
        return (
          {elements}
        );
      }
    }

這是Card組件：

import React from 'react'
export default ({titles, imgsrc, urls, discr}) => {
  return (
    <div className="cards">
        <div className="card">
          <div className="cardHead">
            <h4>{titles}</h4>
          </div>
          <div className="cardBody">
            <img src={imgsrc} alt="pst-img" />
          </div>
          <div className="cardFooter">
            <p>{discr}</p>
            <a className="buttn" href={urls}>
              <button>Read More</button>
            </a>
          </div>
        </div>
      </div>
    )
 }

Answer 1

您沒有在.map返回 JSX，您需要這樣做：

import React from "react";
    export class Cards extends React.Component {
      render() {
        let elements = [];
        elements = this.props.items.map(item => {
         return <Card titles = {item.title} imgsrc = {item.urlToImage}
          discr = {item.description} urls = {item.url}
          />
        })
        return (
          {elements}
        );
      }
    }

或者以更清潔的方式：

import React from "react";
    export class Cards extends React.Component {
      render() {
        return (
         {this.props.items.map(item => {
         return <Card titles = {item.title} imgsrc = {item.urlToImage}
          discr = {item.description} urls = {item.url}
          />
        })}
        );
      }
    }

Answer 2

作為第一個答案，您需要在map()返回 JSX

或者在map()使用( )而不是{}

像這樣

import React from "react";
    export class Cards extends React.Component {
      render() {
        return (
         {this.props.items.map(item => (
         return <Card titles = {item.title} imgsrc = {item.urlToImage}
          discr = {item.description} urls = {item.url}
          />
        ))}
        );
      }
    }