は、配列要素のすべてをバック繰り返すチェックボックスをマッピングし、代わりに私がチェックボックスの配列マップを使用しようとしている私は

Question

Visual: Form I am using on the left, outputs on the right

をチェックしましただけのものはあるものの機能を紹介するために反応するが、ときリアクト私は私のフォームを提出した後、私のフロントエンドのWebページのテーブルに表示されるすべての配列要素を、私がチェックしたものの代わりにデータベースに表示します。それはすべてMongoDBデータベースに戻って報告されています。うまく動作しています（単純なString入力に送信したものを変更して、それがうまく表示されたことを確認しました）ので、マッピングが問題です。ありがとう！

コンストラクタ：

constructor(props) { 
    super(props); 
    this.state = { 
     name: '', 
     price: '', 
     location: ['Back Bay', 'Downtown Crossing'], 
     description: '', 
     features: [ 
      'Pet-Free', 'Climate-Controlled', 'Locked Area', 'Private Entrance', 'Smoke Detectors', 'Smoke Free' 
     ], 
    }; 

     this.onInputChange = this.onInputChange.bind(this); 

    this.addListingService = new ListingService(); 
    this.handleSubmit = this.handleSubmit.bind(this); 
} 

そして、ここが私のマッピングです：

<div>What cool features does this storage space have?</div> 
    { 
    this.state.features.map((features) => { 
       return <CheckBox key={features} title={features} name="features" /> 
      }) 
       } 

編集：

私もそれはそれをトリガーするかどうかを確認するためにonInputChange（）関数を使用しようとしましたチェックしたチェックボックスのオプションだけがフロントエンドのページとデータベースに表示されますが、それは役に立たないようです。私は使用しているフォームと出力を示す写真を添付し​​ました。

 onInputChange(event) { 
     const target = event.target; 
     const value = target.type === 'checkbox' ? target.checked : target.value; 
     const name = target.name; 

     this.setState({ 
      [name]: value, 
     }); 
    } 

編集2：私は以下の提案として、今のキーマッピングをしようとしているが、ObjectKeys機能付きエラーを取得しています

ここでは、その関数です。私は受信エラーが「TypeError例外。：Object.assign（...）フィルタは関数ではありません」と言う

Object.keys(this.state.features).map(key =>({...this.state.features[key],title:key} 
            .filter(features=>features.checked) 
            .map(features => <CheckBox key={features} title={features} onChange = {this.onInputChange} />))) 

Answer 1

あなただけが

Array.prototype.filter使用することができ、配列の特定の要素を表示したい場合は

this.state.features 
    .filter(features=>features.checked) 
    .map(feature => <CheckBox key={feature.id} title={feature.title} name="features" />) 

これは、チェックしたアイテムのチェックボックスのみを表示します。フィルターにtrueを返してアイテムを保持すると、falseは返されません。注：元の配列は変更されません。私の方法では、データを少しでもリファクタリングする必要があります。あなたは、そのような外観の配列をしたいかもしれません

[ 
    {id:1,title:'Pet-Free',checked:true}, 
    {id:2,title:'Climate-Controlled',checked:false}, 
    // ...etc 
]