bugfix> javascript > 投稿

ローカルストレージを使用して保存および配列しようとしていますが、リロードすると配列がリセットされます。私はいくつかの同様の質問に目を通し、提供された回答から理解できるすべてのことを行ったので、問題は私のコードにあるのではないかと推測したので、レビューを手伝ってください。前もって感謝します

import React, { useState, useEffect } from 'react'
import Modal from './Modal'
function Boards() {
    const [boards, setboards] = useState([]);
    const [title, settitle] = useState('');
    localStorage.setItem('boards', JSON.stringify(boards));
    useEffect(() => {
        return () => {
            let storedboards = JSON.parse(localStorage.getItem('boards')) || [];
        }
    }, [])
    const handleChange = (e) => {
        settitle(e.target.value)
    }
    const handleSubmit = () => {
        if (title.length === 0) {
            return;
        }
        setboards(prev => (
            [
                ...prev,
                title
            ]
        ))
        localStorage.setItem('boards', JSON.stringify(boards));
    }
    return (
        <div>
            <ul id="boards">
                <BoardList boards={boards} />
            </ul>
            <Modal title={title} handleChange={handleChange} handleSubmit={handleSubmit} />
        </div>
    )
}
function BoardList({ boards }) {
    const history = useHistory()
    return (
        <>
            {
                boards.map((board, index) => (
                    <li key={index} onClick={() => { history.push('./workspace') }}>
                        <h3>{board}</h3>
                    </li>
                ))}
        </>
    )
}
export default Boards

回答 1 件
  • ボードの初期状態をlocalStorageのボードに設定します

    import React, { useState, useEffect } from 'react'
    import Modal from './Modal'
    
    function Boards() {
        const [boards, setboards] = useState( JSON.parse(localStorage.getItem('boards') || []);
        const [title, settitle] = useState('');
        localStorage.setItem('boards', JSON.stringify(boards));
    
        const handleChange = (e) => {
            settitle(e.target.value)
        }
        const handleSubmit = () => {
            if (title.length === 0) {
                return;
            }
            setboards(prev => (
                [
                    ...prev,
                    title
                ]
            ))
            localStorage.setItem('boards', JSON.stringify(boards));
    
        }
        return (
            <div>
                <ul id="boards">
                    <BoardList boards={boards} />
                </ul>
                <Modal title={title} handleChange={handleChange} handleSubmit={handleSubmit} />
            </div>
        )
    }
    function BoardList({ boards }) {
        const history = useHistory()
        return (
            <>
                {
                    boards.map((board, index) => (
                        <li key={index} onClick={() => { history.push('./workspace') }}>
                            <h3>{board}</h3>
                        </li>
                    ))}
            </>
        )
    }
    export default Boards
    
    

あなたの答え