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

【问题标题】：createContext/ useContext in React not working as expectedReact 中的 createContext/useContext 未按预期工作
【发布时间】：2021-11-12 09:58:27
【问题描述】：

不明白为什么我对 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 值没有更新？

【问题讨论】：

请提供有效的组件定义，而不仅仅是不完整的 sn-ps。您在哪里更新index，它是在哪里定义的？
已更新以包含索引如何传递到组件中。这基本上表明了这个组件被渲染了多少次。（重复组件取决于用户定义他们想要添加多少次国家/地区）

标签： javascript reactjs react-context use-context

【解决方案1】：

您可以在将值包装在 Provider 中后从上下文中访问它们。

在这里：

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

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

我建议你使用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>

【讨论】：

嘿 Erfan - 感谢您的评论。我已经更新了问题代码以反映您的 cmets。在第一个组件中，我应该将子组件传递给 ContextProvider 吗？如果是这样，它需要道具吗？
您需要将您的第二个组件作为子组件传递。它可以有它的道具，但这不是必需的。我更新了我的答案。 @cts
谢谢。我有点困惑的是，当我尝试在第一个的上下文提供程序中渲染我的第二个组件时。它在运行时抱怨缺少 undefined 的属性（在子组件中）——但我们肯定不想传递它的 props，因为我们不想实际渲染该组件（但只是确保它可以访问索引？）。将继续使用它 - 不过感谢您的帮助！