Question

重构一些代码后，我收到了以下错误...

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

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

PS。我已将调试器放在所有位置，并且可以访问我所声明的所有变量，来自状态，道具或我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个。{这意味着并非所有条件块都返回有效的反应对象似乎第一个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

检查所有其他..如果声明和主要问题 - 您不会在render中返回任何内容。您有map的退货，但您也需要退回地图：

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

错误：必须返回有效的React元素（或null）（Checked Return（）和Render（））

2 个答案: