Maksim Ostroginskiy's questions

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

主页.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
    }
}

如何将 useRef.current 输入为字符串？我尝试将 UseRef 的初始值作为字符串传递，但随后出现了另一个问题，将此引用传递给组件时出现键入问题

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

const MainPage = () => {


    const { functions, get } = useTodo()
    const titleRef = useRef(null)

    const sendTodo = (e: FormEvent) => {
        e.preventDefault()
        if(titleRef.current === '') return
        functions.create(titleRef.current, '')
        titleRef.current = null
    }
    
    return (
        <div className={styles.root}>
            <Stack spacing={1} width='20%' component='form' onSubmit={(e) => sendTodo(e)}>
                <TextField ref={titleRef} value={titleRef.current} id="outlined-basic" label="Outlined" variant="outlined" />
                <Button type='submit' variant='outlined'>Create</Button>
            </Stack>
            
        </div>
    )
}

export default MainPage

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[]
}


export const useTodo = (): IUseTodoReturn => {

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

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


    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
    }
}

import React, { useState } from 'react'
import './App.css'
import { Button, TextField } from '@mui/material'
import { Itodo } from './assets/types'
import { TodoList } from './assets/parts/todoList/TodoList'

export const App = () => {

  const [todoText, setTodoText] = useState<string>('')

  const [todos, setTodos] = useState<Itodo[]>([])

  const addTodo = async () => {
    const todoBody:Itodo = {
      bodyText: todoText,
      completed: true,
      id: Date.now()
    }
    if(todoText == '') return
    setTodos([...todos, todoBody])
    setTodoText('')
    console.log(todos)
  }



  return (
    <div className='background'>
      <div className='head'>
        <TextField value={todoText} onChange={event => setTodoText(event.target.value)} id="standard-basic" label="Введите текст" variant="standard" InputLabelProps={{ sx: {fontSize: '18px'} }} sx={{width: '40%'}}/>
        <Button variant="contained" color="success" size='large' sx={{ marginLeft: '10px' }} onClick={addTodo}>
          Добавить
        </Button>
      </div>
      <div className='body'>
        <TodoList todoArray={todos}/>
      </div>
    </div>
  )
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

.background {
  width: 100vw;
  height: 100vh;
  background: rgb(185, 185, 185);
}

.head {
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}

import React, { useState } from 'react'
import './App.css'
import { Button, TextField } from '@mui/material'
import { Itodo } from './assets/types'

export const App = () => {
  const [todoBody, setTodoBody] = useState<Itodo>({bodyText: '', completed: false, id: Date.now()})
  const [todos, setTodos] = useState<Itodo[]>([])

  const addTodo = () => {
    console.log(todoBody)
  }

  return (
    <div className='background'>
      <div className='head'>
        <TextField onChange={event => setTodoBody({bodyText: event.target.value})} id="standard-basic" label="Введите текст" variant="standard" InputLabelProps={{ sx: {fontSize: '18px'} }} sx={{width: '40%'}}/>
        <Button variant="contained" color="success" size='large' sx={{ marginLeft: '10px' }} onClick={addTodo}>
          Добавить
        </Button>
      </div>
      <div className='body'>
      </div>
    </div>
  )
}