Error: A valid React element (or null) must be returned (Checked Return() and Render())

Question

我在重构一些代码后遇到了以下错误...

PartnersIteration.render(): A valid React element (or null) must be 
returned. You may have returned undefined, an array or some other 
invalid object.

到目前为止我读到的所有内容都告诉我要查看 return 和渲染函数的语法。我已经检查了所有内容，我只是看不出错误来自哪里！有人有机会向我指出吗？谢谢！

PS。我已经在各处放置了调试器，并且可以访问我声明的所有变量，来自 state、props 或在我的 render() 函数

中本地定义的其他变量

render() {
  let newAllPartners = this.props.newAllPartners;
  let dynamicPartnerList = this.state.dynamicPartnerList;
  let count = this.state.count;
  let lastLetter = this.props.lastLetter;
  let firstLetter;
  let randomNumber;

if(newAllPartners != null && newAllPartners != undefined && (Object.keys(newAllPartners).length != 0)){
  dynamicPartnerList.map(function(object) {
    randomNumber = Math.floor(Math.random() * (300-10000 + 1) + 1000);

    if(object.name != undefined) {
      firstLetter = object.name.charAt(0);

      if(firstLetter === lastLetter) {
        firstLetter = '';
        showImage(object.id, object.urlPicture);

        return(
          <tbody>
            <tr className="row clickable" key={object.id} onClick={() => this.rowClick(object.id)}>
              <td>
                <table>
                  <tbody>
                    <tr className="row">
                      <td className="child col s4 m3 l2">
                        <img id={object.id}  height="56px" />
                      </td>
                      <td className="col s8 m9 l10">
                        <table>
                          <tbody>
                            <tr>
                              <td className="columnwithTitleSubtile">
                                <p className="producerName">{object.name}</p>
                                <p className="subtitle">{object.countSIF} {<FormattedMessage id="navbar.slaughterhouses"/>}</p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        )
      }

      else {
      lastLetter = firstLetter;
      return(
        <tbody>
          <tr key={randomNumber}>
            <td className="firstLetter">{firstLetter}</td>
          </tr>
        </tbody>
        )
      }
    }

    else {
      return(
        <tbody>
          <tr>
            <td>
              {<FormattedMessage id="msgempty.default"/>}
            </td>
          </tr>
        </tbody>
      )
    }
  })
}

}

Answer 1

您有 3 个 if 语句，但只有 2 个 else。这意味着并非所有条件块 returns 一个有效的反应对象。
似乎第一个 if 条件缺少 else 块，所以我添加了一个供您检查：

if (newAllPartners != null && newAllPartners != undefined && (Object.keys(newAllPartners).length != 0)) {
    dynamicPartnerList.map(function (object) {
        randomNumber = Math.floor(Math.random() * (300 - 10000 + 1) + 1000);

        if (object.name != undefined) {
            firstLetter = object.name.charAt(0);

            if (firstLetter === lastLetter) {
                firstLetter = '';
                showImage(object.id, object.urlPicture);

                return (
                    <tbody>
                        <tr className="row clickable" key={object.id} onClick={() => this.rowClick(object.id)}>
                            <td>
                                <table>
                                    <tbody>
                                        <tr className="row">
                                            <td className="child col s4 m3 l2">
                                                <img id={object.id} height="56px" />
                                            </td>
                                            <td className="col s8 m9 l10">
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td className="columnwithTitleSubtile">
                                                                <p className="producerName">{object.name}</p>
                                                                <p className="subtitle">{object.countSIF} {<FormattedMessage id="navbar.slaughterhouses" />}</p>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                )
            }

            else {
                lastLetter = firstLetter;
                return (
                    <tbody>
                        <tr key={randomNumber}>
                            <td className="firstLetter">{firstLetter}</td>
                        </tr>
                    </tbody>
                )
            }
        }

        else {
            return (
                <tbody>
                    <tr>
                        <td>
                            {<FormattedMessage id="msgempty.default" />}
                        </td>
                    </tr>
                </tbody>
            )
        }
    })
} 
else{ // this was missing
    return <tbody></tbody>
}

Answer 2

检查你所有其他..if 语句和主要问题 - 你 return render 中没有任何内容。您在 map 中有 return，但您也需要 return 您的地图：

return <div>{dynamicPartnerList.map(function (object) {...})} </div>

Error: A valid React element (or null) must be returned (Checked Return() and Render())

Error: A valid React element (or null) must be returned (Checked Return() and Render())

javascript

null

return

render

reactjs