3

请参阅代码沙箱上的完整代码。

我的国家/地区 api 应用程序有两个Route组件-

<>
    <Header/>

    <Router>
        <Switch>
            <CountriesDataProvider>

                <Route path='/' exact component={HomeRoute} />
                <Route path='/detail/:countryName' component={DetailsRoute} />
                        
            </CountriesDataProvider>
        </Switch>
    </Router>
</>

当DetailsRoute我点击一个国家/地区时，每个国家/地区的HomeRoute. 但是当直接发出http请求或DetailsRoute刷新时，我看到了这个错误-

/src/comps/Details/DetailsRoute.jsx

无法读取未定义的属性“边界”

它发生在线 -

const promises = country[0].borders.map(fetchNeighborName);

country[0]从中提取countriesData似乎是undefined-

const {countriesData} = React.useContext(CountriesDataContext);

这不是问题BrowserRouter，因为DetailsRoute组件确实呈现但缺少信息。

我不知道当直接 url 请求被发送到组件时是什么逻辑错误导致它不起作用DetailsRoute？请让我知道修复！

4

1 回答 1

0

问题是当您重新加载详细信息页面时，响应CountriesDataContext还没有回来，所以country是空的。解决问题的一种简单方法（通常是很好的做法）是添加检查以确保数据存在：

async function resolveBorders() {
  // Add a condition to make sure you have the data you expect.
  if (country.length) {
    const promises = country[0].borders.map(fetchNeighborName);
    setBorderCountries(await Promise.all(promises));
  }
}

确保还添加country到效果的依赖数组中，以便在响应返回时再次运行效果：

React.useEffect(() => {
  async function resolveBorders() {
    ...
  }

  resolveBorders();
}, [borderCountries, country]); // <-- Add `country` here
于 2020-09-18T05:32:16.220 回答