javascript - 错误: 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 和 render 函数的语法。我已经检查了所有内容，我只是不知道错误来自哪里!有人可以向我指出吗？谢谢!

PS。我已经将调试器放在各处，并且可以从状态、 Prop 或在我的 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 语句。这意味着并非所有条件 block 都会返回有效的 react 对象。
似乎第一个 if 条件缺少 else block ，所以我添加了一个供您检查:

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