Question

我是React的新手，我正在尝试构建一个简单的单页面应用程序，它从JSON获取一些数据并将其显示为组件的一部分。我正在使用Redux / Saga。

说JSON看起来像这样：

{
  "objA": {
  "description": description,
  "name": name,
  "status": status
},
{
  "objB": {
  "description": description,
  "name": name,
  "status": status
}

现在，当我发出请求时，在网络选项卡（控制台）中我可以看到我没问题，但我似乎无法将其映射到我的组件的道具。这是我的一些代码。

容器/ competitionsSection.js

class CompetitionsSection extends Component {

  componentDidMount() {
    this.props.dispatch(getCompetitionsAction());
  }

  render() {
    console.log(this.props.competitions, 'Competitions'); //returns undefined
    return (<div> </div>)
  }
}

CompetitionsSection.propTypes = {

}; 

const mapStateToProps = ({ competitions }) => ({
  competitions: competitions,
});

export default connect(
  mapStateToProps)(CompetitionsSection);

传奇/ competitionsSaga.js

export function* competitionsSaga({ }) {
  try {
    const competitions = yield call(getCompetitions);
    yield put({ type: types.GET_COMPETITIONS_SUCCESS, competitions })
  } catch (error) {
    yield put({ type: 'SEARCH_MEDIA_ERROR', error });
  }
}

动作/ competitionsAction.js

export const getCompetitionsAction = () => ({
  type: types.GET_COMPETITIONS_SUCCESS
});

减速器/ competitionsReducer.js

export default function (state = initialState.competitions, action) {
  switch (action.type) {
    case types.GET_COMPETITIONS_SUCCESS:
      return [...state, action.competitions];
    default:
      return state;
  }
}

api / api.js（这里我觉得我有问题）

export const getCompetitions = () => {
  const GET_COMPETITIONS_ENDPOINT = /endpoint

  return fetch(GET_COMPETITIONS_ENDPOINT)
  .then(response => {
    return response.json();
  })
  .then(json => {
     console.log(json); //response in the objA {..}, objB {..} format
     return json.data.map(({ name, description, status }) => ({
         name,
         description,
         status
      }));
  });
};

我正在关注Scotch's tutorial。任何帮助将不胜感激。谢谢！

如何使用React-Redux-Saga将JSON响应映射到道具？

0 个答案: