React 中的 createContext/useContext 未按预期工作

Question

无法理解为什么我对 createContext 和 useContext 的使用在我的 React 应用程序中不起作用。

我的上下文文件是这样的：

// @flow
import { createContext, useContext } from "react";

export type CountryIndexProviderType = {
  index: number,
};

const CountryContext = createContext<CountryIndexProviderType>({
  index: 0,
});

type CountryContextProviderProps = {
  children: Node,
  index: number,
};

const CountryContextProvider = ({
  children,
  index,
}: CountryContextProviderProps) => {
  return (
    <CountryContext.Provider value={{ index }}>
      {children}
    </CountryContext.Provider>
  );
};

const useCountryIndexContext = () => useContext(CountryContext);

export { CountryContext, CountryContextProvider, useCountryIndexContext };

我的组件使用 Provider 来设置 index（数字）的值：

import { CountryContextProvider } from "/EnteredCountriesContext";

return (
 {objects.map((index) => (
  <StyledWrappingContainer>
    <StyledProgress>{index + 2}</StyledProgress>
    <CountryContextProvider index={index}>
    // NOT SURE WHAT SHOULD BE HERE?
    </CountryContextProvider>
  </StyledWrappingContainer>
 ))}
);

我的第二个组件，我使用 useContext 将 index 的值传递给样式化组件并呈现值：

import { useCountryIndexContext } from "/EnteredCountriesContext";
const { index } = useCountryIndexContext();

<StyledWrappingContainer>
   <StyledProgress>
      <StyledProgress>{index + 2}</StyledProgress>
   </StyledProgress>
</StyledWrappingContainer>

第二个组件始终呈现默认索引值 2（默认索引 = 0 + 渲染中添加的 2）- 谁能建议为什么我的 index 值没有更新？

Answer 1

将值包装在 Provider 中后，您可以从上下文中访问这些值。

在这里：

  return <CountryContext.Provider value={{ index }}></CountryContext.Provider>;

Provider 没有任何子组件，因此索引永远不会转移到另一个组件。

我建议你使用 children prop.

    const CountryContextProvider = ({ index,children }: CountryContextProviderProps) => {
  return <CountryContext.Provider value={{ index }}>{children}</CountryContext.Provider>;
};

最后从上下文传递任何你想使用索引的组件，作为 CountryContextProvider:

的子组件

    import { CountryContextProvider } from "/EnteredCountriesContext";

return (
 {objects.map((index) => (
  <StyledWrappingContainer>
    <StyledProgress>{index + 2}</StyledProgress>
    <CountryContextProvider index={index}>
<YourSecondComponent /> /// can have any props it needs, not necessary.
</CountryContextProvider>
  </StyledWrappingContainer>
 ))}
);

现在 YourSecondComponent，您将在其中接收索引。

   import { useCountryIndexContext } from "/EnteredCountriesContext";
const { index } = useCountryIndexContext();


    <StyledWrappingContainer>
       <StyledProgress>
          <StyledProgress>{index + 2}</StyledProgress>
       </StyledProgress>
    </StyledWrappingContainer>

React 中的 createContext/useContext 未按预期工作

createContext/ useContext in React not working as expected

javascript

reactjs

react-context

use-context