reactjs入力選択オプションを追加できません

Question

こんにちは私は、バックエンドからオプションのリストを取得しようとしているし、それらをオプションのリストにマップし、リストに追加しましたが失敗しました。誰でも助言してもらえますか？

親コンポーネント：

fetch(urlMakerNames) 
.then((response) => response.json()) 
.then((responseJson) => { 
    var array = JSON.parse(responseJson.marker_names); 
    var options = array.map((opt, index) => { 
     console.log('opt = ' + opt + ', index = ' + index); 
     return '<option key="' + index + '" value="' + opt + '">' + opt + '</option>'; 
    }); 

    console.log('BEFORE options = ' + options + ', markerNames = ' + this.state.markerNames); 

    this.setState({ 
     markerNames: options 
    }); 

    console.log('AFTER options = ' + options + ', markerNames = ' + this.state.markerNames); 

}).catch((error) => { 
    console.error("MarkerForm error = " + error); 
}); 

子コンポーネント：

console.log('this.props.markerNames = ' + this.props.markerNames); 
<FormGroup> 
    <Input type="select" name="markerName" onChange={this.props.handleInputChange} disabled={this.props.isViewMode} required> 
     <option key="12345" value="TEST">TEST</option> 
     {this.props.markerNames} 
    </Input> 
</FormGroup> 

ログ示す：

opt = zzz, index = 0 
BEFORE options = <option key="0" value="zzz">zzz</option>, markerNames = 
this.props.markerNames = <option key="0" value="zzz">zzz</option> 
AFTER options = <option key="0" value="zzz">zzz</option>, markerNames = <option key="0" value="zzz">zzz</option> 

をログから分かるように、markerNamesが正しい形式で子コンポーネントに渡され<option key="12345" value="TEST">TEST</option>に一致しますが、テストオプションのみが入力select eleに表示されますzzzはなくなっています。

Answer 1

アレイを作成したら、手動で要素を作成する必要はありません。レンダリング関数で配列そのものにマッピングすることで、自分の状態をJSX要素のソースとして使用します。

は代わりにこれを試してみてください：

fetch(urlMakerNames) 
.then((response) => response.json()) 
.then((responseJson) => { 
    var array = JSON.parse(responseJson.marker_names); 

    this.setState({ 
     markerNames: array 
    }); 

}).catch((error) => { 
    console.error("MarkerForm error = " + error); 
}); 



    <FormGroup> 
     <Input type="select" name="markerName" onChange={this.props.handleInputChange} disabled={this.props.isViewMode} required> 
      {this.props.markerNames.map((option, inx)=>{ 
       return <option key={inx} value={option}>{option}</option>; 
      })} 
     </Input> 
    </FormGroup> 

Answer 2

あなたが代わりに反応するコンポーネント

return '<option key="' + index + '" value="' + opt + '">' + opt + '</option>'; 

のここでの文字列を返すされているが、これはあなたの入力JSX内でレンダリングされます反応するコンポーネントを返します

return <option key={index} value={opt}>{opt}</option>; 

を試してみてください。