반응 redux 작성 드롭 다운 목록

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 형식으로 매핑하면 제대로 작동합니다.