Question

我正在创建嵌套组件以呈现我拥有的数据。

export const MyComponent = (props) => {

  const groupMilestoneByYear = (data) => {
    // Input: Milestone Data (arr[obj])
    // Output: Milestone Data grouped by Year (bj[arr])
    // Group by Year
    let yearGroup = { '2020': [], '2021': [], '2022': [] } // make it dynamic
    data.forEach(element => {
      let currYear = element.event_date.slice(0, 4)
      yearGroup[currYear].push(element)
    });
    return yearGroup
  }

  const renderTimelineContent = (data) => {
    return (
      data.forEach(milestone => {
        let year = milestone.event_date.slice(0, 4)
        let month = milestone.event_date.slice(5, 7)
        let day = milestone.event_date.slice(8, 10)
        return (
          <Content>
            <ContentYear
              startMonth={month}
              monthType="text"
              startDay={day}
              startYear={year}
              useYear={false}
            />
            <ContentBody title={milestone.text}>
            </ContentBody>
          </Content>
        )
      })
    )
  }

  const formMilestoneTimeline = (milestones) => {
    let yearGroup = groupMilestoneByYear(milestones)
    return (
      Object.keys(yearGroup).forEach(year => {
        // for each year, render the timeline
        return (
          <Fragment>
            <h3>{year}</h3>
            <Timeline>
              {renderTimelineContent(yearGroup[year])}
            </Timeline>
          </Fragment>
        )
      })
    )
  }

  return (
    formMilestoneTimeline(milestones)
  );
}

如您所见，我正在使用在循环中返回多个组件的函数。但这给了我一个错误，提示Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.我并没有完全理解该错误，因为我试图返回所有必要的地方。

Answer 1

  const formMilestoneTimeline = (milestones) => {
    let yearGroup = groupMilestoneByYear(milestones)
    return (
      Object.keys(yearGroup).forEach(year => {
        // for each year, render the timeline
        return (
          <Fragment>
            <h3>{year}</h3>
            <Timeline>
              {renderTimelineContent(yearGroup[year])}
            </Timeline>
          </Fragment>
        )
      })
    )
  }

以上代码未返回任何内容。对于docs，forEach方法的返回值为undefined。如果您想拿东西并将每个项目映射到一个不同的值（即可以渲染的东西），请使用map。

  const formMilestoneTimeline = (milestones) => {
    let yearGroup = groupMilestoneByYear(milestones)
    return (
      Object.keys(yearGroup).map(year => {
        // for each year, render the timeline
        return (
          <Fragment>
            <h3>{year}</h3>
            <Timeline>
              {renderTimelineContent(yearGroup[year])}
            </Timeline>
          </Fragment>
        )
      })
    )
  }

Answer 2

尝试一下，希望它能起作用

export const MyComponent = (props) => {

  const groupMilestoneByYear = (data) => {
    // Input: Milestone Data (arr[obj])
    // Output: Milestone Data grouped by Year (bj[arr])
    // Group by Year
    let yearGroup = { '2020': [], '2021': [], '2022': [] } // make it dynamic
    data.forEach(element => {
      let currYear = element.event_date.slice(0, 4)
      yearGroup[currYear].push(element)
    });
    return yearGroup
  }

  const renderTimelineContent = (props) => {
    return (
      props.data.forEach(milestone => {
        let year = milestone.event_date.slice(0, 4)
        let month = milestone.event_date.slice(5, 7)
        let day = milestone.event_date.slice(8, 10)
        return (
          <Content>
            <ContentYear
              startMonth={month}
              monthType="text"
              startDay={day}
              startYear={year}
              useYear={false}
            />
            <ContentBody title={milestone.text}>
            </ContentBody>
          </Content>
        )
      })
    )
  }

  const formMilestoneTimeline = (props) => {
    let yearGroup = groupMilestoneByYear(props.milestones)
    return (
      Object.keys(yearGroup).forEach(year => {
        // for each year, render the timeline
        return (
          <Fragment>
            <h3>{year}</h3>
            <Timeline>
              <renderTimelineContent yearGroup={yearGroup[year]} />
            </Timeline>
          </Fragment>
        )
      })
    )
  }

  return (
    <formMilestoneTimeline milestones={milestones} />
  );
}

反应：即使我返回，渲染也没有返回任何内容

2 个答案: