Question

我在从我的Express服务器的提取调用中将数组返回到我的React组件时遇到了问题，我在Redux中进行了设置。

我试图从Express这个json返回维生素数组：

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

这是我的actions.js中的fetch调用和FETCH_VITAMINS_SUCCESS操作。

 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 }
 });

这是我的reducers.js，我试图将状态设置为＆＃34; micros.vitamins＆＃34;。

 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);

现在我收回错误＆＃34; TypeError：无法读取属性＆＃39; micros＆＃39; of null＆＃34;，突出显示我的renderData（）函数。

Answer 1

应该是：

const { vitamins } = this.props.micros;

因为您将micros作为道具来自redux。当你试图从状态访问它时（我想这是没有初始化的，这就是为什么它为空）。

另一件事，你在有效载荷中传递Object：

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

并在reducer中将其设置为micros：

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

但是，您的micros最初是一个可能导致意外错误的数组。也许你应该将你的初始状态改为类似于响应的东西：

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

这样const { vitamins } = this.state.micros;将始终返回一些数组 - 在响应之前和之后。

从Redux中的fetch调用返回一个数组到React组件

1 个答案: