React 17.0.1 地图未定义

Question

您好，我正在尝试从 Axios 获取请求中收到的 json 数据创建一个动态表。

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>
        )
    })
)

这是我在计划状态

中得到的

[
{
    "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"
}
]

如何将 key 作为 thead 和 pair 作为 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)