Question

我的App.js中有这些路由

<Route path="/" exact component={Home} />
<Route path="/people" exact component={ComponentA} />
<Route path="/people/:id" exact component={ComponentB} />

在我的ComponentA中，我将此动作称为

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

在此操作中，我要使用async / await来获取数据

export const fetchData= () => async dispatch => {
    const response = await fetch('api/data');
    const data = await response.json();
    const results = await data.results;
    dispatch({
        type: FETCH_DATA,
        payload: results
    });
}

此ComponentA也具有到ComponentB的链接，当我通过单击Link导航到B时，它会加载与特定ID相关的数据，例如/people/1

我正在这样过滤它：

const c = this.props.data.filter((c, index) => index === +[this.props.match.params.id])[0];

但是问题是，如果我正在重新加载页面/people/1时会出错，因为this.props.data是undefined

我可以通过在ComponentB中调用相同的操作来解决此问题，以便this.props.data再次填充数据。但是我不确定两次调用同一操作是否是正确的方法。

所以问题是我可以在不调用两个组件中相同动作的情况下解决此问题吗？还是处理此类问题的正常方法？

当路线在React.js中包含参数时刷新页面

0 个答案: