在组件上使用 .map 会导致组件返回“渲染中没有返回任何内容......”错误答案

【问题标题】：Using .map on a component causes component to return "Nothing was returned from render...." error在组件上使用 .map 会导致组件返回“渲染中没有返回任何内容......”错误
【发布时间】：2021-03-04 21:05:49
【问题描述】：

我从我的 react 组件中获得了 Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null。它工作正常，然后我添加了一个.map 来复制组件并开始收到错误。我看过this answer、this answer、this answer和this answer，但没有找到答案

const AdvisorData = ({weekListForAllAdvisorsOfState}) => {
    const data = usePreloadedQuery(query, queryReference);
    let {forecast} = data
    forecast.map((ind, index) => {
        return (
          <TableRow key={ind.referralCode}>
              <AdvisorTableCell>
                  <pw-subtitle size="small" color="black">{ind.referralCode}</pw-subtitle>
                  <div style={{ flexBasis: "100%" }} />
                  <pw-subtitle size="small" color="grey">{ind.postalCode}</pw-subtitle>
              </AdvisorTableCell>
          </TableRow>
        )
    })
}

【问题讨论】：

标签： reactjs

【解决方案1】：

你试过这种方式吗？

const AdvisorData = ({weekListForAllAdvisorsOfState}) => {
    const data = usePreloadedQuery(query, queryReference);
    let {forecast} = data
        return (
        forecast.map((ind, index) => {
          <TableRow key={ind.referralCode}>
              <AdvisorTableCell>
                  <pw-subtitle size="small" color="black">{ind.referralCode}</pw-subtitle>
                  <div style={{ flexBasis: "100%" }} />
                  <pw-subtitle size="small" color="grey">{ind.postalCode}</pw-subtitle>
              </AdvisorTableCell>
              {weekListForAllAdvisorsOfState}
          </TableRow>
        )
    }})

【讨论】：