変更不可能な.toArray（）はデータをレンダリングしません - ReactJS

Question

私はいくつかのデータをマッピングしていますが、semantic-ui-reactドロップダウンコンポーネントのオプションとしていくつかのデータを使用しようとしていますが、私はそれの末尾に.toArray()を追加しますが、私が不変を使用しないようにデータ構造を変更すると、うまくいきます。なぜ私は物事のより良い理解を得ることができるのか理解したいと思っていました。ここで

は不変とのデータのマッピングです：

  { 
 
      labelingData.map((item, i) => { 
 
       return (
 
       <span key={i}> 
 
        { 
 
        item.get('categories').map((category, c) => { 
 
         return (
 
         <span key={c}> 
 
          { 
 
          category.get('subcategories').map((subcategory, sc) => { 
 
           return (
 
           <span key={sc}> 
 
            { 
 
            subcategory.get('name') === 'Labels' 
 
            ? <Dropdown 
 
             defaultValue={'Bananas'} 
 
             options={subcategory.get('childItems').toArray()} 
 
             /> 
 
            : null 
 
            } 
 
           </span> 
 
          ); 
 
          }) 
 
          } 
 
         </span> 
 
        ); 
 
        }) 
 
        } 
 
       </span> 
 
      ); 
 
      }) 
 
      }

私は未知の小道具程度コンソールでエラーが出るんが、私は自分のコードでこれらの小道具を追加していないです：

Unknown props `_root`, `__ownerID`, `__hash`, `__altered` on <div> tag. Remove these props from the element

Answer 1

api of semantic-ui-reactドロップダウンオプションは、以下のように見えるオブジェクトの配列：

{ text: '', value: '' } 

しかし、あなたはそれが.toJS()地図ではないだろういくつかのImmutable.Mapを含むImmutable.Listに.toArray()を呼び出します。

例えば、

var list = Immutable.fromJS({ value: 1 }, 2]); 
console.log(list.toArray()); // prints [Immutable.Map, 2] 

は、だから、実際に地図の配列ドロップダウンを与えているし、ドロップダウンは、オブジェクトから値を取得するために.getを使用していません。

もう1つのことは、Reactが不変ではなく配列を受け取ることです。リスト。

だから、あなたが反応するコンポーネントの通常の配列を作成するために、reduce関数ではなく、マップ機能を使用できます。

item.get('categories').reduce((result, category, c) => { 
    result.push(<Category key={c} category={category} />); 
    return result; 
}, []);