主页 / 问题 / 1590655
Accepted
Maksim Ostroginskiy
Asked:2024-08-14 19:52:15 +0800 CST2024-08-14 19:52:15 +0800 CST

useEffect 清除本地存储

  • 772

底线：当我创建一个新的待办事项时，它被写入本地存储，并且在页面重新加载后，我希望显示保存的待办事项，但本地存储在页面重新加载后被清除。

主页.tsx

'use client'
import React, { FormEvent, forwardRef, useEffect, useRef, useState } from 'react'
import { Box, Button, Stack, TextField, Typography } from '@mui/material'
import styles from './mainPage.module.scss'
import { useTodo } from '../../hooks/useTodo'
import { describe } from 'node:test'

const MainPage = () => {

    useEffect(() => {
        set(JSON.parse(localStorage.getItem('todoArray') || '[]'))
    }, [])

    const { functions, get, set } = useTodo()
    const titleRef = useRef<HTMLInputElement>()
    const descRef = useRef<HTMLInputElement>()


   

    const sendTodo = (e: FormEvent) => {
        e.preventDefault()
        if (!titleRef.current?.value || !descRef.current?.value) return
        functions.create(titleRef.current.value, descRef.current.value)
        titleRef.current.value = ''
        descRef.current.value = ''
    }

    return (
        <div className={styles.root}>
            <Stack className={styles.form} spacing={1} component='form' onSubmit={(e) => sendTodo(e)}>
                <TextField inputRef={titleRef} sx={{ width: '30%' }} id="outlined-basic" label="Outlined" variant="outlined" />
                <TextField inputRef={descRef} sx={{ width: '30%' }} id="outlined-basic" label="Outlined" variant="outlined" />
                <Button sx={{ width: '30%' }} type='submit' variant='outlined'>Create</Button>
            </Stack>
            <div className={styles.todoView}>
                {get.map((todo, i) =>
                    <Box key={i} className={styles.todoBody}>
                            <Stack gap={1} flexDirection='row' alignItems='center'>
                                <Typography variant='h6'>{i + 1}.</Typography>
                                <Typography variant='h6'>{todo.title}</Typography>
                            </Stack>
                            <Typography sx={{ wordWrap: 'break-word' }}>{todo.description}</Typography>
                            <Button sx={{ mt: 1 }} variant='contained' onClick={() => functions.delete(todo.id)} color='error'>Delete</Button>
                    </Box>
                )}
            </div>
        </div>
    )
}

export default MainPage

useView.ts

import React, { FormEvent, useEffect } from "react"


export interface ITodo {
    id: number
    title: string
    description: string
}

export interface IUseTodoReturn {
    functions: {
        create: (title: string, description: string) => void
        delete: (id: number) => void
    }
    get: ITodo[]
    set: (array: ITodo[]) => void
}


export const useTodo = (): IUseTodoReturn => {

    const [todo, setTodo] = React.useState<ITodo[]>([])

    useEffect(() => {
        localStorage.setItem('todoArray', JSON.stringify(todo))
    }, [todo])

    const set = (array: ITodo[]) => {
        setTodo(array)
    }

    const createTodo = (title: string, description: string): void => {
        setTodo([...todo, { id: Date.now(), title, description }])
    }


    const deleteTodo = (id: number) => {
        const filteredArray = todo.filter(todo => todo.id !== id)
        setTodo(filteredArray)
    }


    return {
        functions: { create: createTodo, delete: deleteTodo },
        get: todo,
        set
    }
}
reactjs

2 个回答

  1. Best Answer

    如果您使用 localStorage，那么在代码中本地存储“任务”并不完全正确，因为 localStorage 应该是唯一的事实来源，当然可能存在 useEffect 和所有这些都合适的情况，但不是在这种情况下

    import { useState } from "react";

export const App = () => {
  const { addTasks, tasks } = useTasks()
  return <div></div>;
};

const useTasks = () => {
  const { forceUpdate  } = useForceUpdate()  
  const tasks = localStorage.getItem("tasks") ?? [];

  const addTasks = (tasks) => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
    forceUpdate();
  };


  return { addTasks, tasks }
};

const useForceUpdate = () => {
  const [_, setNum] = useState(0);

  const forceUpdate = () => setNum((prev) => ++prev);

  return { forceUpdate }
}
    • 1 
  2. const [todo, setTodo] = React.useState<ITodo[]>([])

    useEffect(() => {
        localStorage.setItem('todoArray', JSON.stringify(todo))
    }, [todo])

    据我了解，您只需在更新 todo 页面时覆盖存储，您的 todoArray 为空，因此您的 todoArray: [] 添加类型检查

    if (localStorage.getItem("todoArray") === null ) {
   localStorage.setItem('todoArray', JSON.stringify(todo))
}
    • 0

相关问题