页面刷新时未挂载ContextProvider

问题描述

请在codesandbox上查看完整代码。

我为我所在的国家/地区的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组件时，什么逻辑错误导致该逻辑不起作用？请让我知道解决方法！

解决方法

问题在于，当您重新加载详细信息页面时，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