reactx fill downドロップダウンリスト

Question

私はreduxと反応するアプリケーションに取り組んでいます。私は （api応答から）データで私のドロップダウンリストを埋める方法をつづけています。どのように 私はドロップダウンリストを埋めるために仕事を持っている。しかし、私は がreduxとの反応を使ってドロップダウンリストを記入する標準的な方法であることを知りたい。すべて ヘルプは非常に素晴らしいでしょう。

I have action.jsx :- 
export const FETCH_PROJECTTYPE="FETCH_PROJECTTYPE"; 
    export const FETCH_PROJECTTYPE_SUCCESS="FETCH_PROJECTTYPE_SUCCESS"; 
    export const FETCH_PROJECTTYPE_FAILURE="FETCH_PROJECTTYPE_FAILURE"; 
    export function fetchProjectType(){ 
     const request=axios({ 
     url:`${URL.ROOT_URL}/projecttype`, 
     method:'GET', 
     Headers:[] 
     }); 
     return{ 
     type:FETCH_PROJECTTYPE, 
     payload:request 
     } 
    } 

    export function fetchProjectTypeSuccess(projectTypes){ 
     return{ 
     type:FETCH_PROJECTTYPE_SUCCESS, 
     payload:projectTypes 
     } 
    } 

    export function fetchProjectTypeFailure(error){ 
     return{ 
     type:FETCH_PROJECTTYPE_FAILURE, 
     payload:error 
     } 
    } 
projectReducer.jsx :- 
import {FETCH_PROJECTTYPE,FETCH_PROJECTTYPE_SUCCESS,FETCH_PROJECTTYPE_FAILURE} from '.././actions/project.jsx'; 

const INITIAL_STATE={ 
    projectTypeList:{projectTypes:[],error:null,loading:false}, 
} 

export default function (state=INITIAL_STATE, action) { 
    let error; 
    switch (action.type){ 
    case FETCH_PROJECTTYPE: 
     return {...state,projectTypeList:{projectTypes:[],error:null,loading:true}}; 

    case FETCH_PROJECTTYPE_SUCCESS: 
     return {...state,projectTypeList:{projectTypes:action.payload,error:null,loading:false}}; 

    case FETCH_PROJECTTYPE_FAILURE: 
     error = action.payload || {message: action.payload.message}; 
     return{...state,projectTypeList:{projectTypes:[],error:error,loading:false}}; 

    default: 
     return state; 

    } 
} 

projectTypeContainer.jsx :- 
import {connect} from 'react-redux'; 
import {fetchProjectType,fetchProjectTypeSuccess,fetchProjectTypeFailure} from '.././actions/project.jsx'; 
import SelectOption from '.././components/renderSelectOption.jsx'; 

const mapStateToProps=(state)=>{ 
    return{ 
    projectTypeList:state.projectTypes.projectTypeList 
    } 
} 

const mapDispatchToProps=(dispatch)=>{ 
    return{ 
    fetchProjectType:()=>{ 
     dispatch(fetchProjectType()).then((response)=>{ 
     !response.error ? dispatch(fetchProjectTypeSuccess(response.payload.data.objdata)):dispatch(fetchProjectTypeFailure(response.payload.data)) 
     }); 
    } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(SelectOption); 

SelectOption.jsx : - 
import React,{Component} from 'react'; 
import Select from 'react-select' 


export default class SelectOption extends Component{ 
    constructor(props){ 
    super(props) 
    } 

    componentWillMount(){ 
    this.props.fetchProjectType(); 
    } 

    render(){ 
    const { projectTypes,error,loading } = this.props.projectTypeList; 
    console.log('project type data are ' + JSON.stringify(projectTypes)); 
    const option=projectTypes.map((item)=>{ 
    return <option key={item._id} value={item.Title}>{item.Title}</option> 
    }); 

    return(
     <select className="form-control"> 
     {option} 
     </select> 
    ) 
    } 
} 

Answer 1

SelectOption{ value, label }（通常セレクト成分がそう）のような形状を有するnオブジェクトを有する配列を取るべきです。したがって、APIの応答をSelectOptionという形式にマップする必要があります。

SelectOptionがどのように表示されているのか分かりませんが、投稿したことはありません。いずれにしても、データはSelectOptionの形式にマップされているため、うまくいくはずです。