Javascript 为什么这个函数没有像我期望的那样打印DIV？

我的渲染中有以下代码

我得到以下错误。。为什么？第23行没有来源

整个文件

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;

---

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

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语句或将元素括在括号中：

对于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> 
           )
           }
          )
        )
      }
    }}
  );

---

因为您并没有从映射回调函数返回任何内容。只需到处添加return:returnarray.sources.map。。。这里还有：return No sources请显示完整的类，尤其是呈现函数化的整个类file@soldfor没问题！为了在将来自动防止类似的错误，我建议使用TypeScript。TypeScript将指出您没有从呈现方法返回有效元素：此外，如果您的问题已解决，请将答案标记为已接受：

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>

          )
        )
      }
    }}
  );

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> 
           )
           }
          )
        )
      }
    }}
  );