Question

我正在处理我使用与redux反应的应用程序。我是如何用数据填充我的下拉列表（来自api responce）。怎么样我有办法填写下拉列表。但我想知道什么是使用与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应该使用一个数组，其中n个对象的形状为{ value, label }（通常选择组件会这样做）。因此，您应该将api响应映射到SelectOption已知的格式。

我们无法知道SelectOption的样子，因为我没有看到你发布了它。无论如何将数据映射到格式SelectOption期望它应该有效。

反应redux填充下拉列表

1 个答案: