0
我工作的應用,在其中我用終極版反應。我是 堅持如何填充我的下拉列表中的數據(來自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>
)
}
}
請參閱我把我的SelectOption代碼。這工作正常。但是當我在表單上選擇任何值提交我沒有得到選定的值。 – Meesam