时间戳

首页 > 解决方案 > 状态如何用于反应

reactjs - 状态如何用于反应

问题描述

我正在尝试查看我在 GitHub 上找到的一个封面跟踪器项目，以了解如何在有用的应用程序中使用 react。这是我在项目开始时找到的以下代码，有人可以解释一下它的含义吗？如果这是一个模糊的问题，我深表歉意。

对于上下文，该应用程序列出了所有国家及其当前的 covid 病例，并可选择搜索特定国家

const GlobalList = () => {
  const state = useContext(AppContext);
  const { summaryData } = state;
  const [countriesSwitch, setCountriesSwitch] = useState("a");

  const countries = summaryData.Countries;



const RenderedCountries = () => {
    switch (countriesSwitch) {
      case "ascendingConfirmedCases":
        return countries
          .sort((a, b) => (a.TotalConfirmed < b.TotalConfirmed ? 1 : -1))
          .map((i, k) => {
            return (
              <Grid.Column key={k}>
                <CounrtyItem
                  country={correctedNames(i.Country)}
                  countryCode={i.CountryCode.toLowerCase()}
                  totalConfirmed={addComma(i.TotalConfirmed)}
                  totalRecovered={addComma(i.TotalRecovered)}
                  totalDeaths={addComma(i.TotalDeaths)}
                />
              </Grid.Column>

标签： reactjs

解决方案

const state = useContext(AppContext);

解释 ：

在此处的第一行中，使用了一个名为 useContext 的钩子。useContext 钩子用于从组件树上最近的值获取上下文值。所以在父组件的某个地方有一个名为的上下文AppContext，它被传递给子组件，而我们当前的组件就是其中一个子组件。

-------------哦------

const { summaryData } = state;

解释

在这一行中，我们使用 es6 ```spread operator```` 从状态变量中提取 susmmaryData 的值。

---------------O-----------------

const [countriesSwitch, setCountriesSwitch] = useState("a");

解释

在这一行中，我们维护一个状态变量来使用useStatehook 切换国家状态。该钩子用于维护 React 组件中的本地状态。

---------------O-----------------

  const countries = summaryData.Countries;

这是标准的 JavaScript。没什么好解释的

---------------O-----------------

switch (countriesSwitch) {
      case "ascendingConfirmedCases":
        return countries
          .sort((a, b) => (a.TotalConfirmed < b.TotalConfirmed ? 1 : -1))
          .map((i, k) => {
            return (
              <Grid.Column key={k}>
                <CounrtyItem
                  country={correctedNames(i.Country)}
                  countryCode={i.CountryCode.toLowerCase()}
                  totalConfirmed={addComma(i.TotalConfirmed)}
                  totalRecovered={addComma(i.TotalRecovered)}
                  totalDeaths={addComma(i.TotalDeaths)}
                />
              </Grid.Column>

解释

countriesSwitch如前所述，在此 switch 语句中，我们根据其值呈现组件，该值保持在本地状态。

推荐阅读