help reducex fill drop down list

Question

Я работаю над применением, в котором я использую реакцию с redux. я застрял, как заполнить мой раскрывающийся список данными (из api responce). Как когда-либо у меня есть работа, чтобы заполнить выпадающий список. но я хочу знать, что является стандартным способом заполнения выпадающего списка, используя реакцию с сокращением. Любая помощь будет очень большой.

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 должен принять массив, который имеет n объекты с формой, как { value, label } (обычно выбирают компоненты делают это). Поэтому вам следует отобразить ответ api в формате, известном как SelectOption.

Мы не можем знать, как выглядит SelectOption, поскольку я не вижу, что вы разместили его. В любом случае, карта данных в формате SelectOption ожидает, и она должна работать.