错误：一个有效的做出反应元素（或空）必须返回（返回选中（）和渲染（））

问题描述：

重构了一些代码后，我已经收到以下错误......错误：一个有效的做出反应元素（或空）必须返回（返回选中（）和渲染（））

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

}

不执行一些回报... – Li357

好，好抓你们所有分支。不幸的是，我实施了这一修正，但仍然遇到同样的错误。我最终摆脱了我的'.map'函数之前的第一个'if'。所以现在，它只是直接到没有条件的map函数。现在，我有2个“if”和2个“else” –

关于您的代码的注释。该组件太大，难以阅读。它根本不是模块化的。你的渲染也有太多的逻辑，你不应该在if语句这样的if语句。你应该建立一致的回报。 –

答

检查你所有else..if语句和主要的问题 - 你没有任何回报render。你有map的回报，但你需要来回报您的地图太：

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

不错！我完全忘了返回'.map'函数。我把这个文件从'const'重构为一个有状态的组件，并且必须错过这个部分。谢谢！另外，“if/else”的差异也是一个问题。 –

答

本地定义你有3个if报表和只2 else's。这意味着并非所有的条件块都会返回有效的反应对象。
好像第一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> 
}

错误：一个有效的做出反应元素（或空）必须返回（返回选中（）和渲染（））

相关推荐