如何修复React中的map is not a function错误？

我遇到错误"map" is not a function进行 API 调用时。我不久前才开始学习 React 和 API。我尝试将状态更改为对象，但未定义，因为[].
我得到的地图不是一个函数。也许我缺少调用 API 的东西。这是下面的代码

function Facility() {
  
  const [facility, setFacility] = useState([]);

 try {
      const fetch = await Axios.get(
        //API
      )
      //setFacility(fetch.data);
    console.log('result', fetch.data);
    } catch (err) {
      console.log(err);
    }
  };


  return (      
        <Table  >
          <TableHead>
            <TableRow>
              <TableCell />
              <TableCell >
                Facility Code
              </TableCell>
              <TableCell >
                Facility Name
              
            </TableRow>
          </TableHead>
          <TableBody>
            {facility.map((item, idx) => {
              return (
                <>
                  <TableRow
                    key={idx}
                  >
                   
                    <TableCell >
                      {item.facility_code}
                    </TableCell>
                    <TableCell>{item.facility_name}</TableCell>
                   
                  </TableRow>
                 
                </>
              );
            })}
          </TableBody>
        </Table>
    
   
  );
}

export default Facility;

从下面的API返回的数据

{
    "data": [
        {
            "facility_code": 148312,
            "facility_name": "Phc Marit",
        },
        {
            "facility_code": 767529,
            "facility_name": "FPL",       
        },   
    ]
}

我正在尝试使用material-ui 表映射来自API 的数据，但我得到facility.map 不是一个函数。请帮助我解决此实施问题。

我在codesandbox上创建了这个例子：https://codesandbox.io/s/hardcore-joana-xfybt?file=/src/App.js

有很多事情可能会出错。

首先，在使用地图之前，您必须验证是否有数据。所以你可以这样做：

Step 1:

所以，首先改变：

{facility.map((item, idx) => {

to this:

{facility && facility.map && facility.map((item, idx) => {

Step 2:

另外，请考虑您如何接收答案，通常是通过 axios。因为axios回报response。如果你。想要访问响应的正文是response.data，如果你的身体也有数据。也许你需要做类似的事情：fetch.data.data

（查看getData函数）