Блог

ОБНОВЛЕНИЕ: он работает. проблема была в эффекте использования

Когда я пытаюсь «отправить» конкретную задачу, в локальном хранилище отображается, что атрибут статуса не изменен. Интересно, в чем я ошибаюсь? Данные, которые я пытаюсь использовать для обновления локального хранилища, — это initialState.stuff .

Вот мой код для reducer.js:

 const reducer = (state,action)=>{
    if(action.type ==="completed"){
//the relevant attributes to be changed 

        let temp = state.stuff.map((task)=>{
            if(task.id === action.payload){
                return {...task,status:status,enddate:enddate}
            }
            return task;
        });
// the rest of the parts of this code is irrelevant
 

вот мой код для context.js:

 import React, {useState,useContext,useEffect,useReducer} from "react"
import reducer from "./reducer";
const AppContext = React.createContext()

const initialState = {
    stuff: null
}
const AppProvider =  ({children}) =>{
    const [tasks,setTasks] = useState([])
    const [status,changeStatus] = useState("");
    const [state,dispatch] = useReducer(reducer,initialState)
    const complete = (id) =>{
        dispatch({type:"completed",payload:id})
        console.log("done", initialState.stuff)
        setTasks(initialState.stuff)
    }

    const deleted = (id) =>{
        dispatch({type:"deleted",payload:id})
    }

    const getLocalStorage = () =>{
        state.stuff = localStorage.getItem("tasks")
        if(state.stuff){
          state.stuff = JSON.parse(state.stuff)
          return JSON.parse(localStorage.getItem("tasks"))
        }
        else{
          return []
        }
      }
      const fetchData = async()=>{
        setLoading(true)
        setTasks(getLocalStorage());
        setLoading(false);
      }
      useEffect(()=>{
          fetchData()
      },[])

      useEffect(()=>{
        localStorage.setItem("tasks",JSON.stringify(tasks))
      },[tasks])


return <AppContext.Provider
value = {{
    loading,
    tasks,setTasks
}}>
    {children}
</AppContext.Provider>
}


export const useGlobalContext = () =>{
    return useContext(AppContext)
}
export {AppContext,AppProvider}
 

Я думаю, что в вашем коде может быть (я не полностью прочитал ваш код) столкновение переменных. Вы можете попробовать написать window.localStorage вместо localStorage этого и проверить, решает ли это вашу проблему.