У меня проблемы с возвратом массива в компонент 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 ()