ReactCompositeComponent.render(): должен быть возвращен действительный ReactComponent. Возможно, вы вернули undefined, массив или какой-либо другой недопустимый объект

Question

Я получаю вышеуказанную ошибку в консоли, хотя я правильно возвращаю компонент, который нужно визуализировать. Значение errorTexts = ["email is invalid"] в следующем коде

if(@state.errorTexts.length>0) 
      dangerouslySetInnerHTML: { 
       __html: ReactDOMServer.renderToString(
       React.createElement AdminError, errorTexts: @state.errorTexts 
      ) 
      } 

и компонент AdminError содержит следующий фрагмент кода:

#app/assets/javascripts/components/adminerror.js.coffee 
@AdminError = React.createClass 

    getDefaultProps: -> 
    errorTexts: [] 

    render: -> 
    for errorText in @props.errorTexts 
     dom.div 
     className: 'help-block' 
     errorText 

JS эквивалент этого компонента существа:

(function() { 
    this.AdminError = React.createClass({ 
    getDefaultProps: function() { 
     return { 
     errorTexts: [] 
     }; 
    }, 
    render: function() { 
     var errorText, i, len, ref, results; 
     ref = this.props.errorTexts; 
     results = []; 
     for (i = 0, len = ref.length; i < len; i++) { 
     errorText = ref[i]; 
     results.push(dom.div({ 
      className: 'help-block' 
     }, errorText)); 
     } 
     return results; 
    } 
    }); 

}).call(this); 

Значение результата, возвращаемого из компонента AdminError, отображается на скриншоте ниже, однако я не уверен, что возвращаемый тип возвращаемого объекта приемлемыми или нет, как он находится внутри для цикла:

ОБНОВЛЕНИЕ: изменил код в AdminError компонента, чтобы исправить этот error

#app/assets/javascripts/components/adminerror.js.coffee 
@AdminError = React.createClass 

    getDefaultProps: -> 
    errorTexts: [] 

    render: -> 
    dangerouslySetInnerHTML: { 
     __html: marked((
     dom.div null, 
      for errorText, index in @props.errorTexts 
      dom.div 
       key: index 
       className: 'help-block' 
       errorText 

    ).toString()) 
    } 

и снова получил эту ошибку:

Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.invariant 

Answer 1

render метод не может вернуть несколько элементов, он должен вернуть только один. Поэтому оберните список в другой элемент DOM:

render: -> 
    dom.div null, 
    for errorText in @props.errorTexts 
     dom.div 
     className: 'help-block' 
     errorText 

Answer 2

Реагент принимает только один родительский элемент, который должен быть возвращен из рендера. Из кода это похоже, что вы возвращаете несколько. Попробуйте это:

// your code ... 
return (
    <div> 
    {results} 
    </div> 
) 

Я не совсем уверен, что это было бы в кофе сценария, но основная идея заключается в том, что вам нужно обернуть ваше возвращение в один родительский элемент.