时间戳

首页 > 解决方案 > 我如何将来自父母的道具作为上下文传递给它的孩子？

javascript - 我如何将来自父母的道具作为上下文传递给它的孩子？

问题描述

所以我在反应中获取数据，并且我想从父级的上下文中的响应中传递一个单独的值作为道具，trendingData 来自 api 调用中的响应。代码：

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

TrendingData 的初始值未定义，trendingData 被传递到反应导航中的屏幕堆栈。我想在这样的上下文中使用它：

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>
  );
};

但我得到一个错误：当我只想避免在每个屏幕上钻孔时，未定义不是一个对象（评估'_useContext.name'）。我如何将来自父母的道具作为上下文传递给它的孩子？

标签： javascriptreactjsreact-context

解决方案

[编辑]再次阅读您的问题后，这并没有回答它，而且这很愚蠢，因为您可能已经在您的子组件中使用了钩子。现在，您似乎正在尝试访问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>
  );
};

这个想法是在您的条件中添加趋势数据以呈现或不呈现您的组件。在这里，我只用一个简单的条件来表示它，你必须适应你自己的方式。效果也是一样，我在里面做了一个提取，但只是调整它或提供更多代码，这样我就可以更精确。

希望能帮助到你 ：）

我认为您需要在 API 调用后调度您的趋势数据。这样您就可以将其用作正常的上下文值。您可以使用 useContext()：

[state, dispatch] = useContext(CategoryContext);

这样您就可以访问您的状态。它可以在您需要使用状态或向其分派新数据的每个无状态组件中完成。当然你需要一个减速器。

如果你不知道我在说什么，我强烈建议你看看The official documentation aboutHooks

推荐阅读