有効な反応要素またはnullが返されなければなりません - Reactjsエラー

Question

私にとって解決しなければならないエラーがあります。私は以下の簡単な反応成分を持っています

import React from 'react'; 

const ForumPostComponent = (topics) => { 
    const {forums} = topics; 

    return (
      forums.toJS().map((forum, key) => { 
       console.log(forum); 
        return ( 
         <div className="post" key={key}> 
        ) 
       }) 


    ) 
} 

私は反応成分を使っていました。

<ForumPostComponent forums={this.props.forums.get('forums')} /> 

タイトルにエラーが発生します。また、フォーラムコンポーネントのMy consoleメッセージは値を返します。私は試してみて、多くの似たような質問を読んでいませんでした。私は何が欠けているのですか？

Answer 1

配列が無効な反応要素であるため、いくつかの容器でラップする必要があります。例えば。 <div>：

return (
    <div> 
    {forums.toJS().map((forum, key) => { 
     console.log(forum); 
     return ( 
     <div className="post" key={key} /> 
    ) 
    })} 
    </div> 
) 

さらに要素キーとしてアレイインデックスを使用して悪い習慣です。代わりにいくつかのビジネスキーを使用する必要があります。