我如何从父体传递一个prop作为上下文到子体?

我在react中获取了一个数据,我想把响应中的一个单独的值作为道具从父体的上下文中传递过来,trendingData来自api调用中的响应。

  if (loading) return <Loading />;
  return (
    <VidoesContainer>
      <TopBar />
      <FitnessChallenge />
      <MainContainer>
        <Category categoryData={trendingData} />
        <Trainers />
      </MainContainer>
    </VidoesContainer>
  );

trendingData的初始值是未定义的, trendingData被传递到一个屏幕堆栈中的react导航. 我想在这样的上下文中使用它。

const CategoryScreenStack = ({ categoryData }) => {
  return (
    <CategoryContext.Provider value={categoryData}>
      <Stack.Navigator initialRouteName='Category'>
        <Stack.Screen name='Category' component={Category} />
        <Stack.Screen
          name='Video'
          options={{
            transitionSpec: {
              open: TransitionSpecs.FadeInFromBottomAndroidSpec,
              close: TransitionSpecs.FadeOutToBottomAndroidSpec,
            },
          }}
          component={Video}
        />
      </Stack.Navigator>
    </CategoryContext.Provider>
  );
};

但我得到一个错误:undefined不是一个对象(评估’_useContext.name’),而我只是想避免在每个屏幕上使用道具。我如何将一个道具从父体作为上下文传递给它的子体?

解决方案:

(编辑) 在再次阅读了你的问题之后,这并没有回答你的问题,而且这很愚蠢,因为你可能已经在你的子组件中使用了钩子。现在,看起来你正在尝试访问一个属性。name 所以要确保你的数据在你的上下文中是可用的。下面是我如何处理这个问题。

export const App = () => {
  const [trendingData, setTrendingData] = useSate(undefined);

  useEffect(() => {
    fetch('...').then((response) => {
      setTrendingData(response.someData);
    });
  });

  const loading = trendingData === undefined;

  if (loading) return <Loading />;
  return (
    <VidoesContainer>
      <TopBar />
      <FitnessChallenge />
      <MainContainer>
        <Category categoryData={trendingData} />
        <Trainers />
      </MainContainer>
    </VidoesContainer>
  );
};

我的想法是在你的条件中添加trendingData来渲染或不渲染你的组件。在这里我只是用一个简单的条件来表示,你必须用你自己的方式来适应它。同样的事情也适用于效果,我在里面做了一个取值,但只是适应它或提供更多的代码,所以我可以更精确。

希望能帮到你:)


我认为你需要在调用API后调度你的trendingData。这样你就可以把它作为一个普通的上下文值来使用。你可以使用useContext()。

[state, dispatch] = useContext(CategoryContext);

这样你就可以访问你的状态。它可以在每一个无状态组件中完成,在那里你需要使用状态或派遣新数据到它。当然,你需要一个reducer。

如果你不知道我在说什么,我强烈建议你看看以下内容 关于Hooks的官方文档

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何让kivymd用户动画卡到我的应用程序中?

2022-9-13 6:25:25

未分类

无法从车把杆生成的按钮中提取.attr()。

2022-9-13 6:25:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索