Question

我的render()中有以下代码

const recentActivity = this.props.touchpointsPayload.data
  .map((array) =>
    {if (array.mdn === this.props.number) {
      console.log("WE GOT A MATCH --> " + this.props.number + " PROPS / " + array.mdn + " from response");
      if (array.sources === undefined) {
        <div>No Sources</div>
      } else {
        array.sources.map((sources) =>
          sources.events.map ((events) =>
          <div className="container-timeline righttimeline" history-type={events.source} key={events.id}>
            <div className="content-timeline">
              <h2 className="callTypeCaps">{events.tag}</h2>
              <div>{events.description}</div>
              <div>{events.date}</div>
            </div>
          </div>

          )
        )
      }
    }}
  );

然后我将在我的return

中称呼它

{recentActivity}

我收到以下错误。为什么？第23行是<div>No Sources</div>

  Line 23:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

整个文件

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React, { Component } from 'react';
import '../App.css';


class Activity extends Component {

  constructor(props) {
      super(props);
      this.state = {
        sources: []
      };
    }

  render() {

    const recentActivity = this.props.touchpointsPayload.data
      .map((array) =>
        {if (array.mdn === this.props.number) {
          console.log("WE GOT A MATCH --> " + this.props.number + " PROPS / " + array.mdn + " from response");
          if (array.sources === undefined) {
            return <div>No Sources</div>
          } else {
            return array.sources.map((sources) =>
              sources.events.map ((events) =>
              <div className="container-timeline righttimeline" history-type={events.source} key={events.id}>
                <div className="content-timeline">
                  <h2 className="callTypeCaps">{events.tag}</h2>
                  <div>{events.description}</div>
                  <div>{events.date}</div>
                </div>
              </div>

              )
            )
          }
        }}
      );

    return (
      <div id="componentBorder" className="componentBorder padding05">
        <div className="container">
          <div className="row">
            <div className="col-12 componentTitle componentDiv">Recent Activity</div>
          </div>
        </div>


        <div id="scrollingActivity">
          <div className="padding1030">

            <div className="container">
              <div className="row marginLeft10">
              <div className="timeline">
                  {recentActivity}
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>

    );
  }
}


export default Activity;

Answer 1

您没有返回元素，它应该像这样工作：

const recentActivity = this.props.touchpointsPayload.data
  .map((array) =>
    {if (array.mdn === this.props.number) {
      console.log("WE GOT A MATCH --> " + this.props.number + " PROPS / " + array.mdn + " from response");
      if (array.sources === undefined) {
        return <div>No Sources</div>;
      } else {
        return array.sources.map((sources) =>
          sources.events.map ((events) =>
          <div className="container-timeline righttimeline" history-type={events.source} key={events.id}>
            <div className="content-timeline">
              <h2 className="callTypeCaps">{events.tag}</h2>
              <div>{events.description}</div>
              <div>{events.date}</div>
            </div>
          </div>

          )
        )
      }
    }}
  );

Answer 2

您需要使用return语句或将元素包装在括号中：

使用return语句（请记住，elmeent必须与return语句在同一行中）：

const recentActivity = this.props.touchpointsPayload.data
  .map((array) =>
    {if (array.mdn === this.props.number) {
      console.log("WE GOT A MATCH --> " + this.props.number + " PROPS / " + array.mdn + " from response");
      if (array.sources === undefined) {
        return <div>No Sources</div>
      } else {
        array.sources.map((sources) =>
          sources.events.map ((events) => {
          return <div className="container-timeline righttimeline" history-type={events.source} key={events.id}>
            <div className="content-timeline">
              <h2 className="callTypeCaps">{events.tag}</h2>
              <div>{events.description}</div>
              <div>{events.date}</div>
            </div>
          </div>
           }
          )
        )
      }
    }}
  );

或者加上括号，我认为它增加了可读性：

const recentActivity = this.props.touchpointsPayload.data
  .map((array) =>
    {if (array.mdn === this.props.number) {
      console.log("WE GOT A MATCH --> " + this.props.number + " PROPS / " + array.mdn + " from response");
      if (array.sources === undefined) {
       return ( <div>No Sources</div> )
      } else {
        array.sources.map((sources) =>
          sources.events.map ((events) => {
          return ( <div className="container-timeline righttimeline" history-type={events.source} key={events.id}>
            <div className="content-timeline">
              <h2 className="callTypeCaps">{events.tag}</h2>
              <div>{events.description}</div>
              <div>{events.date}</div>
            </div>
          </div> 
           )
           }
          )
        )
      }
    }}
  );

为什么此功能不能像我期望的那样打印出DIV？

2 个答案: