我无法映射存储在本地存储中的数组

Question

使用 useState 和 useEffect 挂钩，我将数组存储在本地存储中。

    const data = window.localStorage.getItem("arrKey")

    const [arr, setArr] = useState(data || [])

    useEffect(() => {
        if (data) {
            setArr(JSON.parse(data))
        }
    }, [])

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

我也想将其显示在我的页面上。每次新的用户输入被推送到数组时，它都应该被添加到显示的列表项中。现在，如果我将数组作为一个整体显示，它就可以正常工作。但是当我尝试使用地图功能一一显示元素时，我收到此错误：

这是我的代码：

    return (
        <>
            <form onSubmit={handleSubmit}>
                <h2>Enter numbers</h2>
                <input type={"number"} name={"newnum"}/>
            </form>
            <ul>
                {arr.map(num => (
                    <li>{num}</li>
                ))}
            </ul>
        </>
    )

Answer 1

我的假设是，在生命周期的某个时刻，arrKey 但应该可以通过在 JSX 中添加保护条件来解决。

{arr && arr.map(num => (
  <li>{num}</li>
))}