Как передать опору от родителя в качестве контекста его ребенку?

Question

, поэтому я выбираю данные в реакции, и я хочу передать отдельное значение из ответа в контексте от родителя как проп, 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>
  );
};

, но я получаю ошибку: undefined не является объектом (оценивающим '_useContext.name'), когда я просто хочу избегать сверления пропеллера на каждом экране , Как передать опору от родителя в качестве контекста его ребенку?

Answer 1

[Редактировать] После прочтения вашего вопроса, он не отвечает, и это довольно глупо, поскольку вы, вероятно, уже используете хуки в дочернем компоненте. Теперь, похоже, вы пытаетесь получить доступ к свойству 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. Таким образом, вы сможете использовать его как обычное значение контекста. Вы можете использовать useContext ():

[state, dispatch] = useContext(CategoryContext);

Таким образом, у вас будет доступ к вашему состоянию. Это можно сделать в каждом компоненте без сохранения состояния, где вам нужно использовать состояние или отправлять в него новые данные. Конечно, вам понадобится редуктор.

Если вы не знаете, о чем я говорю, я настоятельно рекомендую вам взглянуть на Официальную документацию по крючкам