时间戳

首页 > 解决方案 > 使用 Context 更新每个屏幕上的数据

reactjs - 使用 Context 更新每个屏幕上的数据

问题描述

这是我第一次使用上下文。所以，我有大约 6 个屏幕，在每个屏幕上，用户选择一些选项，在第 6 个屏幕上，我想要他们在之前的屏幕上选择/输入的所有信息。

我创建了一个名为的类context.js，我在其中完成了此操作：

export const bookData = React.createContext({
    bookingData: {
        "app_date": 0,
        "app_est": "",
        "app_phone": "",
        "app_ic": "",
        "app_timeslots": {},
        "app_hour": 0,
        "app_est_url": "",
        "app_year": 0,
        "app_email": "",
    }
})

这是我在第 6 个屏幕上需要的有效负载。现在在屏幕 1 上，我已将其导入为，import BookContext from '../utils/context'并且此屏幕有一个下一步按钮，我想在其中将数据传递给app_email, app_phone，并且app_ic我在使用填充的变量中添加了该按钮。useState()在这个屏幕上：

<MainActionButton title={'Next'} pressEvent={() => { 
alert(email + phone + ic)
}}  />

这里email,phone和ic使用 a 设置useState()。那么如何使用BookContext我在其中导入的内容pressEvent来访问/更新上下文？

我在这里可能完全偏离了轨道，因为我还不完全理解上下文的概念，所以会有一个简短的答案。

标签： reactjsreact-native

解决方案

您需要在上下文中创建一个“api”来更新记录（例如bookContext.update(payload)），例如：

import * as React from "react";

let ContextOne = React.createContext();

let initialState = {
  count: 10,
  currentColor: "#bada55"
};

let reducer = (state, action) => {
  switch (action.type) {
    case "reset":
      return initialState;
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    case "set-color":
      return { ...state, currentColor: action.payload };
  }
};

function ContextOneProvider(props) {
  let [state, dispatch] = React.useReducer(reducer, initialState);
  let value = { state, dispatch };

  return (
    <ContextOne.Provider value={value}>{props.children}</ContextOne.Provider>
  );
}

let ContextOneConsumer = ContextOne.Consumer;

export { ContextOne, ContextOneProvider, ContextOneConsumer };

我将我的应用程序包装在我的自定义上下文/提供程序中：

import { ContextOneProvider } from "./ContextOne";
import { App } from "./App";

ReactDOM.render(
  <ContextOneProvider>
    <App />
  </ContextOneProvider>,
  document.getElementById("root")
);

现在当我消费时ContextOne：

function App() {
  let { state, dispatch } = React.useContext(ContextOne);
  // dispatch will update the context and re-render
}

我写了一个演练： https ://dev.to/oieduardorabelo/react-hooks-how-to-create-and-update-contextprovider-1f68

我推荐的一个抽象 React.Context 的库是：

推荐阅读