反應 17.0.1 map 未定義

Question

您好我正在嘗試從 json 數據創建一個動態表，該數據來自 Axios 獲取請求。

const [projectData, setprojectData] = useState({});
const [schedule, setSchedule] = useState({});

useEffect(() => {
    Axios.get(`/fetch-project-details/${id}`, {}).then((response) => {
        setprojectData(result[0]);
        setSchedule(JSON.parse(result[0].p_schedule));
});


return (
    <div>
    schedule.map((value) => { // How to return the key value pairs as a table format
        return (
          <tr>{value.id}</tr>
          <th>{value.keys}</th>
        )
    })
)

這是我在計划中得到的 state

[
{
    "Sno": "1",
    "First Name": "name",
    "Last Name": "las2t name",
    "Email": "test@gmail.com",
    "Amount": "2000"
},
{
    "Sno": "1",
    "First Name": "first name",
    "Last Name": "last name",
    "Email": "test2@gmail.com",
    "Amount": "2000"
}
]

如何將密鑰作為 thead 和對作為 tbody 返回？

Answer 1

// const [schedule, setSchedule] = useState({});
const [schedule, setSchedule] = useState([]);

return (
    <div>
    {
      schedule.map((value) => { 
        return (
          <tr>{value.id}</tr>
          <th>{value.keys}</th>
        )
      })
    }
    </div>
)

Answer 2

    return is executed before the schedule is set by setSchedule. so you can add a null check in return.
     <div>
       {schedule && ( schedule.map((value) => {
            return (
              <tr>{value.id}</tr>
              <th>{value.keys}</th>
            )
        }) )}

or use ? operator like schedule?.map((value)