Question

我是新来的反应redux。我正在尝试使用foursquare api构建一个简单的餐厅应用程序。我有两个动作让api调用1st。搜索餐厅和第二个以获取此类详细信息。

Action.js

python.exe

这是我的组件

export const fetchVenueDetail = venueId => dispatch => {
  console.log("dispatching");
  dispatch({ type: FETCH_VENUE_REQUESTED });
  fetch(
    `https://api.foursquare.com/v2/venues/${venueId}? 
     client_id=${api_id}&client_secret=${api_key}&v=20180422`
  )
    .then(res => res.json())
    .then(data => dispatch({ type: FETCH_VENUE, payload: 
     data.response.venue }))
    .catch(err => console.log(err));
};

经过测试，我发现它没有调度动作，这就是我收到空响应的原因。

以下是工作沙箱代码如果有人想检查 - https://codesandbox.io/s/7m4153p1jq

Answer 1

Ok所以问题是我在componentDidMount生命周期内调度我的动作但是当我将它更改回componentWillMount时。有用。有人能解释一下原因吗？

Answer 2

实际问题是，您在<div class="container docviewer-wrapper"> <iframe id="docvieweriframe" src="http://www.pdf995.com/samples/pdf.pdf"></iframe> </div>组件中的请求开始之前收到错误。在您的请求完成之前，Sidebar对象中没有groups属性。

如果您在venue案例中添加此类检查，则该广告应运行良好：

"tips"

您可以将const itemTips = venueTips.tips.groups ? venueTips.tips.groups[0].items : [];添加到您的reducer并检查groups属性或选择其他方式，例如包装所有组件，包括length组件，并显示Sidebar而不是他们。像这样：

<强> VenueDetail.js

Loader

Here已更新codesandbox。

React / Redux - 不调度动作

2 个答案: