标签: react-context

假设我们已经设置了上下文提供程序以及一些初始数据属性值。

假设某个消费者随后修改了这些属性。

在页面重新加载时，这些更改将丢失。保留数据以便保留这些数据修改的最佳方法是什么？除了简单的本地存储，还有其他方法吗？

我想知道推荐的最佳实践是处理和公开新的React Context。

操纵上下文状态的最简单方法似乎是将函数附加到上下文，该函数一旦被调用就可以调度（usereducer）或setstate（useState）来更改其内部值。

export const TodosProvider: React.FC<any> = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, null, init);

  return (
    <Context.Provider
      value={{
        todos: state.todos,
        fetchTodos: async id => {
          const todos = await getTodos(id);
          console.log(id);
          dispatch({ type: "SET_TODOS", payload: todos });
        }
      }}
    >
      {children}
    </Context.Provider>
  );
};

export const Todos = id => {
  const { todos, fetchTodos } = useContext(Context);
  useEffect(() => {
    if (fetchTodos) fetchTodos(id);
  }, [fetchTodos]);
  return (
    <div>
      <pre>{JSON.stringify(todos)}</pre> …

我正在尝试从 with 移植class component到react hookswith Context API，但我无法弄清楚出现错误的具体原因是什么。

首先，我的代码：

// contexts/sample.jsx
import React, { createContext, useState, useContext } from 'react'
const SampleCtx = createContext()

const SampleProvider = (props) => {
  const [ value, setValue ] = useState('Default Value')
  const sampleContext = { value, setValue }
  return (
    <SampleCtx.Provider value={sampleContext}>
      {props.children}
    </SampleCtx.Provider>
  )
}

const useSample = (WrappedComponent) => {
  const sampleCtx = useContext(SampleCtx)
  return (
    <SampleProvider>
      <WrappedComponent
        value={sampleCtx.value}
        setValue={sampleCtx.setValue} />
    </SampleProvider>
  )
}

export {
  useSample …

到目前为止我只能找到如何使用Context API 的描述，但没有找到它是如何工作的，特别是如何触发消费者组件重新渲染。源代码的链接会很棒！

我是上下文 API 的新手，并试图让我的代码正常工作。我收到错误：

未捕获的类型错误：对象不可迭代（无法读取属性 Symbol(Symbol.iterator)）

你们中的一些好人会帮忙解决这个问题吗？

initialUserState 记录一个如下所示的对象：{name: nanny}

我的上下文文件是：

import { createContext, useState } from "react";

const initialUserState = JSON.parse(localStorage.getItem("user"));
console.log(initialUserState);
const initialFormValues = {
  video: "Video.mp4",
  hourly: "",
  ageRange: [],
  car: "",
  languages: [],
  homework: "",
  license: "",
  preference: "",
  vaccination: "",
  radius: "",
  booked: "",
  fileUpload: "file.jpg",
};

export const Global = createContext();

export default function GlobalContext({ children }) {
  const [state, setState] = useState(initialUserState);
  const [values, setValues] = useState(initialFormValues); //setting form state
  const [radioSelected, setRadioSelected] = …

所以我在React Context + Typescript上遇到了一个很奇怪的问题。

工作实例

在上面的示例中，您可以看到我正在尝试做的实际工作。本质上，我正在使用新的useContext方法管理状态，并且它运行完美。

但是，当我尝试在盒子上执行此操作时，似乎无法找到通过useReducer传递的状态值。

export function AdminStoreProvider(props: any) {
const [state, dispatch] = useReducer(reducer, initialState);
// state.isAuth is avail here
// state.user is avail here
const value = { state, dispatch };
// value.state.isAuth is avail here
return (
    /* value does not contain state once applied to the value prop */
    <AdminStore.Provider value={value}>{props.children} 
    </AdminStore.Provider>
   );
}

错误信息：

Type '{ state: { isAuth: boolean; user: string; }; dispatch: 
Dispatch<Actions>; }' is missing the following properties from type …

当前行为

我有一个使用react-navigationv5 进行路由的本机应用程序。

1. 我的所有视图中都有一个抽屉（左侧偏移菜单）
2. 我使用 stackNavigation 进行页面转换。

由于(1)，我的结构是drawerNavigator (a) > stackNavigator (b) > views (c).

当我尝试useNavigation()在 my 中调用钩子时<DrawerContent />，出现以下错误：

Error: We couldn't find a navigation object. Is your component inside a navigator?
    at useNavigation (bundle.js:8766)

是的，我不在里面，stackNavigator所以无法调用钩子

预期行为

我希望在我的<DrawerContent />.

您的环境

| software                       | version |
| ------------------------------ | ------- |
| iOS or Android                 | iOS, Android and web
| @react-navigation/native       | 5.0.0-alpha.41
| @react-navigation/stack         | …

我有几个组件需要访问相同的玩家列表。这个玩家列表不会改变，但我不知道哪个组件首先需要它。我的想法是，无论哪个组件首先需要它（axios 请求）更新我的 redux 存储，然后其他组件将仅使用相同的自定义挂钩。

export default function usePlayersList() {
  const {list, loading, error} = useSelector(state => state.accounts.players)
  const dispatch = useDispatch()
  
  useEffect(() => {
    try {
      const response = authAxios.get(endpoints.players.retrieve)
      response.then(res => {
          dispatch({
            type: "SET_PLAYERS_LIST",
            payload: {
              error: false,
              loading: false,
              list: res.data.payload
            }
          })
        })
    } catch (e) {
      console.log(e)
      dispatch({
        type: "SET_PLAYERS_LIST", 
        payload: {
          error: true,
          loading: false,
          list: []
        }
      })
    }
  }, [dispatch])
  return {list, loading, error}
}

这是我为此定制的钩子。想知道这样做是否有任何不便，或者是否有更好的模式。提前致谢。

顺便说一句...更好的是，我将加载和错误设置为 usePlayersList 中的 useState 变量（而不是将它们发送到 redux …

我如何在 React Router v6 的上下文中包装 2 个路由？只有这两个应该暴露在该上下文中，并且我无法单独设置上下文，因为上下文运行一些代码（useEffect），如果我这样做，它会在每次切换路由时触发，我希望它在加载两条路由之前而不是之后触发按下它们，而且在我加载 app.js 后，app.js 会加载，而上下文提供程序不会加载，那么当我这两个路由之一时，上下文会触发，而当我在它们之间切换时，它不会触发，这可能吗？谢谢

  return (
    <Layout>
      <Routes>
        <Route path="/*" element={<Navigate replace to='/login'/>} />
        <Route path="/pracels" element={<PracelsPage/>} />
        <Route path="/search" element={<SearchPracelPage/>} />
        <Route path="/login" element={<LoginPage/>} />
      </Routes>
    </Layout>
  );

我想用 1 个上下文提供程序包装 /pracels 和 /search

我尝试浏览类似的问题和文章，但似乎没有任何效果。我也有点不知道错误的含义，因为我尝试设置一个值并尝试声明一个类型，但都不起作用。

import React, { createContext, SetStateAction, useState } from 'react';

export const MenuContext = createContext({
    open: false,
    setOpen: () => {},
});
export default function MenuManager(props:any) {
    const [open, setOpen] = useState(false);
    return (
        <MenuContext.Provider value={{ open, setOpen }}>
            {props.children}
        </MenuContext.Provider>
    );
}

错误返回的是

Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '() => void'.