为什么这没有在反应时呈现答案

【问题标题】：Why is this not rendering on react为什么这没有在反应时呈现
【发布时间】：2021-12-05 22:22:17
【问题描述】：

我确实从用户那里获取信息，将其存储在 localStorage 中，然后循环遍历它为存储中的每个元素创建一个注释，我还尝试使用 useState() 来跟踪 localStorage并动态渲染笔记，不确定是否正确

// react and styled-components imports

    function Challenge19() {
        const [storage, setStorage] = useState(localStorage);
        const [isTitleAvailable, setIsTitleAvailable] = useState(false);
        const [errorTitle, setErrorTitle] = useState();


    useEffect(() => {
        if (isTitleAvailable) {
            setErrorTitle('Available title.')
        }
        else {
            setErrorTitle('Try another title.')
        }

    }, [isTitleAvailable]);
    
    
    function createNote(){
        const noteTxt = document.getElementById('createNote').value;
        if (isTitleAvailable) {
            const title = document.getElementById('title').value;
            localStorage.setItem(title , noteTxt);
        }
        setStorage(localStorage)
    }

    function handleClear(){
        localStorage.clear();
        setStorage();
    }

    function deleteNote(key) {
        localStorage.removeItem(key);
        setStorage(localStorage);
    }

    function verifyTitle(event) {
        if (event.target.value in localStorage) {
            setIsTitleAvailable(false);
        } 
        else {
            setIsTitleAvailable(true);
        }
    }

    return (
        <div id='box'>
            {Object.entries(storage).forEach(([key, value]) => {
                return (
                    <Create key={key}>
                        <textarea value={value} readOnly />
                        <button onClick={() => deleteNote(key)} >Delete Note!</button>
                        <button onClick={() => handleClear()} >Edit Note!</button>
                    </Create>
                )
            })}

        <Create>
            <input autoComplete="off" placeholder='Name' type='text' id='title' onChange={(event) => verifyTitle(event)}/>
            <p>{errorTitle}</p>
            <textarea name='createNote' id='createNote' />
            <button onClick={() => createNote()} >Create Note!</button>
            <button onClick={() => handleClear()} >Remove all Notes!</button>
        </Create>
        </div>
    );
};

export default Challenge19;

问题出在这部分：

{Object.entries(storage).forEach(([key, value]) => {
                return (
                    <Create key={key}>
                        <textarea value={value} readOnly />
                        <button onClick={() => deleteNote(key)} >Delete Note!</button>
                        <button onClick={() => handleClear()} >Edit Note!</button>
                    </Create>
                )
            })}

如果我将object.keys() 或object.values() 与.map() 一起使用，我可以循环和渲染，但在这种情况下，我需要键和值，并且不会以这种方式渲染任何东西。我的代码有什么问题？这是不打算渲染的吗？有没有更好的方法？

【问题讨论】：

标签： reactjs

【解决方案1】：

没有什么可以阻止您使用.mapping 条目 - 所有Object.keys、Object.values 和Object.entries 都会为您提供一个可以迭代的数组。

{Object.entries(storage).map(([key, value]) => (
                    <Create key={key}>
                        <textarea value={value} readOnly />
                        <button onClick={() => deleteNote(key)} >Delete Note!</button>
                        <button onClick={() => handleClear()} >Edit Note!</button>
                    </Create>
               ))}

【讨论】：

我简直傻了，谢谢你的回答