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

Question

"map" is not a function我在进行 API 调用时遇到错误。我不久前才开始学习 React 和 API。我尝试将状态更改为 object 但未定义，如[].
我得到的地图不是一个函数。也许我缺少调用 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返回的数据

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;

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

Answer 1

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

有很多事情可能会出错。

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

步骤1：

所以，首先改变：

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

对此：

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

第2步：

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

（查看getData函数）