如何在 Context API 中传递路由参数

Question

我正在使用上下文 API，我的上下文文件中有这个：

useEffect(() => {
    async function getSingleCountryData() {
      const result = await axios(
        `https://restcountries.eu/rest/v2/alpha/${props.match.alpha3Code.toLowerCase()}`
      );
      console.log(result)
      setCountry(result.data);
    }
    if (props.match) getSingleCountryData();
  }, [props.match]);

在我正在使用的组件中，它不起作用，因为它不知道 props.match.alpha3Code 是什么。我怎样才能传递价值？ alpha3Code 来自 URL：localhost:3000/country/asa 其中asa 是 alpha3Code，我怎样才能得到这个值？

基本上，我想做的是。我有一个我在主页上列出的国家列表。现在，我正在尝试获取有关单个国家/地区的更多信息。路由是/country/:alpha3Code，其中alpha3Code 是从API 获取的。

FWIW，这是我的完整上下文文件：

import React, { useState, createContext, useEffect } from 'react';
import axios from 'axios';

export const CountryContext = createContext();

export default function CountryContextProvider(props) {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState([]);

  useEffect(() => {
    const getCountryData = async () => {
      const result = await axios.get(
        'https://cors-anywhere.herokuapp.com/https://restcountries.eu/rest/v2/all'
      );
      setCountries(result.data);
    };
    getCountryData();
  }, []);

  useEffect(() => {
    async function getSingleCountryData() {
      const result = await axios(
        `https://restcountries.eu/rest/v2/alpha/${props.match.alpha3Code.toLowerCase()}`
      );
      console.log(result)
      setCountry(result.data);
    }
    if (props.match) getSingleCountryData();
  }, [props.match]);

  return (
    <CountryContext.Provider value={{ countries, country }}>
      {props.children}
    </CountryContext.Provider>
  );
}

在我使用country 的组件中，我有： const { country } = useContext(CountryContext);

我知道我可以从组件本身执行此操作，但我正在学习如何使用上下文 API，因此我正在处理我的上下文中的所有 API 调用。

我正在使用的 API 是 here

Codesandbox Link

项目 Github link

Answer 1

您可以通过传递一个更新上下文状态的 setter 函数来从使用它的组件更新上下文。

export default function CountryContextProvider({ children }) {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] = useState([]);
  const [path, setPath] = useState('');

  useEffect(() => {
    async function getSingleCountryData() {
      const result = await axios(`your/request/for/${path}`);
      setCountry(result.data);
    }
    if(path) getSingleCountryData();
  }, [path]);

  return (
    <CountryContext.Provider value={{ countries, country, setPath }}>
      {children}
    </CountryContext.Provider>
  );
}

现在使用 setPath 在挂载此组件后使用路由匹配更新请求端点。

const Details = ({ match }) => {
  const {
    params: { alpha3Code }
  } = match;
  const { country, setPath } = useContext(CountryContext);

  useEffect(() => {
    setPath(alpha3Code);
  }, [alpha3Code]);

  return (
   <main>Some JSX here</main>
  );
};

export default withRouter(Details);

链接是一个有效的codesandbox implementation

Answer 2

在我正在使用的组件中，它不起作用，因为它不知道 props.match.alpha3Code 是什么。我怎样才能传递价值？这 alpha3Code 来自 URL：localhost:3000/country/asa 其中 asa 是 alpha3Code，我怎样才能得到这个值？

我猜你的问题的根源是这个。您不知道aplha3Code 参数来自哪个。我已经深入研究了您的 GitHub 存储库以使其更清晰。

1. 首先，match 是 react-router 提供的术语之一。当您使用props.match, props.history, props.location 之类的东西时，您的组件必须由withRouter 包裹，这是react-router 提供的高阶组件。查看withRouter。例如，下面是 react-router 提供的 withRouter 用法：

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

ShowTheLocation 被withRouter HOC 包裹起来，它将所有路线道具（比赛、历史、位置...）通过道具传递给ShowTheLocation。然后在ShowTheLocation 中，您可以使用props.match 之类的东西。够清楚吗？

回到你的问题！您还没有通过withRouter 包装任何组件，是吗？坚持下去，玩得开心！你很快就会明白的！

另外，请注意您必须将您的组件放在BrowserRouter 下才能使用 react-router 的东西

1. 如果你想使用 Hooks，请看看这个超级有用的：

   https://usehooks.com/useRouter/

它将所有useParams, useLocation, useHistory, and use useRouteMatch 挂钩包装成一个useRouter，只公开我们需要的数据和方法。然后，例如，在你的组件内部，这样做：

import { useRouter } from "./myCustomHooks";

const ShowMeTheCode = () => { 
   const router = useRouter();
   return <div>This is my alpha3Code: {router.math.params.alpha3Code}</div>;
}

---

Peoray 回复中的更新 1：

这是出现问题的地方： https://github.com/peoray/where-in-the-world/blob/cb09871fefb2f58f5cf0a4f1db3db2cc5227dfbe/src/pages/Details.js#L6

你应该避免像这样直接调用useContext()。看看我下面的例子：

// CountryContext.js
import { useContext, createContext } from "react";

const CountryContext = createContext();

export const useCountryContext = () => useContext(CountryContext);

相反，您应该使用上面的useCountryContext 之类的自定义钩子来包装它。然后，在您的 Details 组件中，导入它并执行以下操作：

import React, from 'react';
import { useCountryContext } from '../contexts/CountryContext';

const Details = (props) => {
  const { country } = useCountryContext();
  ...
}

---

Peoray 回复中的更新 2：

虽然我已经提前给你说了，但我只是觉得你没有付出足够的努力去完成我所说的。

另外，请注意您必须将您的组件放在 BrowserRouter 能够使用 react-router 的东西

在您的codesandbox 中，它显示Cannot read property 'match' of undefined 错误。好的，正如我上面所说，您还没有将ContextCountryProvider 移动到BrowserRouter 下以获得useRouter 工作。

我已经给你修好了，弹出了这个界面，请到updated codesanbox here查看。您将在 App.js 文件中获得所需的内容。

虽然它仍然会在那里抛出一些 Axios 错误，但我认为我的工作已经完成。剩下的就看你自己了。

Answer 3

您可以使用useParams 钩子在上下文提供程序中获取所需的一切。 Docs

类似这样的：

1. 在您的 Provider 组件所在的文件中导入 useParams
2. 在您的 CountryContextProvider 中将其添加到组件的顶部：

const { alpha3Code } = useParams();

1. 更新需要props.match的useEffect

useEffect(() => {
    async function getSingleCountryData() {
      const result = await axios(
        `https://restcountries.eu/rest/v2/alpha/${alpha3Code.toLowerCase()}`
      );
      console.log(result)
      setCountry(result.data);
    }
    if (alpha3Code) getSingleCountryData(); // or if you need `match` - do not destructure useParams()
  }, [alpha3Code]);