我如何 map 反應 js 中的一個數組我試過了但是有一些問題誰能幫我

Question

所以我嘗試從 localDataStorage 獲取數據並嘗試在屏幕上填充反應，但反應顯示錯誤'[{'，'預期'代替'。' 在 jsx 行 localStorageData.iength 中，或者如果我從代碼中刪除它而不是顯示與“localDataStorage.map”相同的錯誤，它要求我刪除“。”

import { useEffect, useState } from "react";
import "./inbox.css";
 
const Inbox = () => {
  const [localStorageData, setlocalStorageData] = useState([])

  useEffect =(()=>{
    JSON.parse(localStorage.getItem('todos')).then(data=> setlocalStorageData(data))
  }, [localStorageData])

  return (
    {localStorageData.length > 0 &&
       localDataStorage.map((element, index) => (
        <div className="inbox" key ={index}>
          <div className="bullet">&#x27A3;</div>
          <div className="msg">{element.message}</div>
          <div className="btn-container">
            <div className="date">{element.title}</div>
            <div className="edit btn hide">
              <i className="fa-solid fa-pen-to-square"></i>
            </div>
            <div className="delete btn hide">
              <i className="fa-solid fa-trash"></i>
            </div>
          </div>
        </div>
      ))
    }
  )
}

export default Inbox;

錯誤如下

[{ "resource": "/C:/Users/PC/Desktop/web/new/src/component/inbox/inbox.js", "owner": "typescript", "code": "1005", "severity": 8, "message": "',' expected.", "source": "ts", "startLineNumber": 14, "startColumn": 22, "endLineNumber": 14, "endColumn": 23 }]

Answer 1

刪除 return 語句中的外大括號。 像這樣的大括號只在 JSX 內部使用。

另外，您的意思可能是.length而不是.iength 。

Answer 2

我相信應該有 localStorageData.map 而不是 localData.map

Answer 3

import React from "react"
import { useEffect, useState } from "react"
import "./inbox.css"

const Inbox = () => {
  const [localStorageData, setlocalStorageData] = useState([])

  useEffect =
    (() => {
      JSON.parse(localStorage.getItem("todos"))
        .then(data => setlocalStorageData(data))
        .catch(err => console.log(err))
    },
    [localStorageData])

  return (
    <>
      {localStorageData.length > 0 &&
        localStorageData.map((element, index) => (
          <div className="inbox" key={index}>
            <div className="bullet">&#x27A3;</div>
            <div className="msg">{element.message}</div>
            <div className="btn-container">
              <div className="date">{element.title}</div>
              <div className="edit btn hide">
                <i className="fa-solid fa-pen-to-square"></i>
              </div>
              <div className="delete btn hide">
                <i className="fa-solid fa-trash"></i>
              </div>
            </div>
          </div>
        ))}
    </>
  )
}

export default Inbox

Answer 4

您沒有將代碼包裝到單個元素中嘗試

return (
    <>
    {
      localStorageData.length > 0 &&
        localData.map((element, index) => (
          <div className="inbox" key={index}>
            <div className="bullet">&#x27A3;</div>
            <div className="msg">{element.message}</div>
            <div className="btn-container">
              <div className="date">{element.title}</div>
              <div className="edit btn hide">
                <i className="fa-solid fa-pen-to-square"></i>
              </div>
              <div className="delete btn hide">
                <i className="fa-solid fa-trash"></i>
              </div>
            </div>
          </div>
        ))
    }
    </>
  )