时间戳

首页 > 解决方案 > 如何使用上下文保存状态值

javascript - 如何使用上下文保存状态值

问题描述

在此处输入图像描述我正在使用 3steos 创建一个模态，我想在第二步中使用第一步状态，但是当我移动到第二步时，所有状态都初始化为其初始状态。我是使用反应上下文和回调的新手。下面是代码

const AuditModalContextProvider = ({children}) => {
  const [modalState, setModalState] = useState({
    isOpen: false,
    modalType: 'New',
    modalFor: 'Audit',
    id: '',
    name: '',
    method: '',
    activeCreateForm: 0,
})

const openModal = useCallback(
    () =>
      setModalState({
        ...modalState,
        isOpen: true,
      }),
    [modalState]
  )

 const handleChangeCreateForm = useCallback(step => {
    if (step === 0) {
      handleIncreaseDecreaseStep(0, [])
    } else if (step === 1) {
      handleIncreaseDecreaseStep(1, [])
    } else if (step === 2) {
      handleIncreaseDecreaseStep(2, [])
    } else if (step === 3) {
      handleIncreaseDecreaseStep(3, [])
    }
  }, [])

  const handleStatusforPreviousNextButton = useCallback(
    val => {
      setModalState({
        ...modalState,
        isOpen: true,
        formState: false,
      })

      handleChangeCreateForm(
        modalState.activeCreateForm >= 0 && modalState.activeCreateForm < 4
          ? modalState.activeCreateForm + val
          : 0
      )
    },
    [setModalState, handleChangeCreateForm, modalState]
  )

const value = {
    ...modalState,
    openModal,
    closeModal,
    handleStatusforPreviousNextButton,
    handleChangeCreateForm
}
return <AuditModalContext.Provider value={value}>{children}</AuditModalContext.Provider>
}

const AuditModalContextConsumer = AuditModalContext.Consumer

export {AuditModalContext, AuditModalContextProvider, AuditModalContextConsumer}

在此处输入图像描述

如何使用上下文保存状态

标签： javascriptreactjsreact-context

解决方案

你想使用像 redux 这样的上下文。在上下文文件中：

import React,{createContext, useReducer} from 'react'

const initialState = {
    isOpen: false,
    modalType: 'New',
    modalFor: 'Audit',
    id: '',
    name: '',
    method: '',
    activeCreateForm: 0,
}

export const modalContext = createContext(initialState)
//Set here your state when you dispatch an action

const reducer = (state, action) => {
  switch(action.type) {
    case 'OPEN_MODAL':
      return {...state, isOpen: true}
    default:
      return state
  }
}

const AuditModalContextProvider = ({children}) => {
  const value = useReducer(reducer, initialState)
  return <modalContext.Provider value={value}>{children}</modalContext.Provider>
}

export default AuditModalContextProvider

在 index.js 中，通过 contextProvider 包装你的应用程序

...
import AuditModalContextProvider from 'your context file's path'

const root = (
  <AuditModalContextProvider>
   <App />
</AuditModalContextProvider>
)

ReactDOM.render(root, document.getElementById('root'))

在您的模态文件中，使用您的上下文来获取当前状态并调度一个动作

import React, {useContext} from 'react'
import {modalContext} from 'your context file's path'

YourModal = props => {
    ...
    const [state, dispatch] = useContext(modalContext)
    ...
}

通过编写使用你的状态：例如 state.modalType 当你想通过编写在减速器中做某事时调度一个动作：dispatch({type: 'tag for reducer', payload: 'your data to pass to reducer'})

有关更多信息，请参阅此网站：https ://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/

推荐阅读