Возврат массива в компонент React из вызова fetch в Redux - PullRequest
Новая
       16

Возврат массива в компонент React из вызова fetch в Redux

0 голосов
/ 27 мая 2018

У меня проблемы с возвратом массива в компонент React из вызова выборки с моего сервера Express, который я настроил в Redux.

Я пытаюсь просто вернуть массив витаминов из этого json из Express: 

 router.get('/', function(req, res, next) {
   vitamins: [
    {
       name: "Vitamin B2"
    }
   ],
   minerals: [
   {
      name: "Zinc"
   }
   ]});
 });

Это вызов выборки и действие FETCH_VITAMINS_SUCCESS в моих actions.js. 

 export function fetchVitamins() {
   return dispatch => {
     return fetch("/users")
      .then(res => res.json())
      .then(micros => {
        dispatch(fetchVitaminsSuccess(micros.vitamins));
        return micros.vitamins;
    })
  };
 }

 export const FETCH_VITAMINS_SUCCESS = 'FETCH_VITAMINS_SUCCESS';

 export const fetchVitaminsSuccess = vitamins => ({
    type: FETCH_VITAMINS_SUCCESS,
    payload: { vitamins }
 });

Это мой файл redurs.js, в котором я пытаюсь установить состояние "micros.vitamins". 

 const initialState = {
   micros: [],
 };

 function vitaminReducer(state = initialState, action) {
    switch(action.type) {
    case FETCH_VITAMINS_SUCCESS:
    return {
       ...state.vitamins,
       micros: action.payload
    };
  default:
    return state;
  }
}

Это мой компонент React Vitamins.js, в который я импортирую fetchVitamins () и пытается передать имена каждого витамина в раскрывающемся меню в теге параметра. 

componentDidMount() {
   this.props.fetchVitamins();
}

renderData() {
   const { vitamins } = this.state.micros;
   return vitamins.map((micro, index) => {
      return (
        <option value={micro.value} key={index}>{micro.name}</option>
      )
   })
 } 

render() {
  return (
    <select value={this.props.value}>
      {this.renderData()}
    </select>
  )
}

const mapStateToProps = state => ({
   micros: state.vitamins,
});

export default connect(mapStateToProps, { fetchVitamins })(Vitamins);

Прямо сейчас я получаю сообщение об ошибке «Ошибка типа: невозможно прочитать свойство 'micros' с нулевым значением", выделивмоя функция renderData ()

1 Ответ

0 голосов
/ 27 мая 2018

Это должно быть: 

const { vitamins } = this.props.micros;

, потому что вы передаете micros как реквизит из редукса.Пока вы пытались получить к нему доступ из состояния (которое, я думаю, не было инициализировано, поэтому оно имеет значение null).

Другое дело, вы передаете Object в полезной нагрузке: 

export const fetchVitaminsSuccess = vitamins => ({
  type: FETCH_VITAMINS_SUCCESS,
  payload: { vitamins }
});

и устанавливаете его какmicros в вашем редукторе: 

switch(action.type) {
case FETCH_VITAMINS_SUCCESS:
return {
   ...state.vitamins,
   micros: action.payload
};

Однако ваш micros изначально является массивом, который может привести к непредвиденным ошибкам.Возможно, вам следует изменить исходное состояние на что-то похожее на ответ, например: 

const initialState = {
  micros: {
    vitamins: []
  },
};

Таким образом const { vitamins } = this.state.micros; всегда будет возвращать некоторый массив - до и после ответа.

...