为什么这个 API 数据没有渲染到 React 页面？答案

【问题标题】：Why This API data is not rendering to React Page?为什么这个 API 数据没有渲染到 React 页面？
【发布时间】：2021-09-19 05:43:32
【问题描述】：

获取所有 kamForms 数据的 API

router.get('/kam', (req, res) => {
  kamForm
    .find()
    .then((result) => {
      res.status(200).json({
        kamData: result,
      });
    })
    .catch((err) => {
      console.log(err);
      res.status(500).json({
        message: err,
      });
    });
});

这是 API 调用和渲染部分，当我检查浏览器时，所有数据都重复显示在控制台中。我会附上控制台的ss。

const PendingApplication = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    axios
      .get('http://localhost:5000/api/kam')
      .then((response) => {
        console.log(response);
        setData(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  });

  return (
    <div>
      <Table>
        <TableBody>
          {[data].map((item, index) => (
            <TableRow key={index}>
              <TableCell>{item.kcpname}</TableCell>
              <TableCell>{item.companyname}</TableCell>
              <TableCell>{item.ticketno}</TableCell>
              <TableCell>{item.totalemp}</TableCell>
              <TableCell>{item.kcpnid}</TableCell>
              <TableCell>{item.kcpcontact}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

This is how the data showing in the browser consloe

【问题讨论】：

标签： javascript arrays mern

【解决方案1】：

两个问题。

首先，您在 useEffect 挂钩中导致了无限循环，因为没有提供依赖数组。这将在每个渲染上运行效果（这反过来会在 axios 解析后设置状态，从而导致另一个渲染，运行效果等）。

其次，您正在映射数组[data].map，其中data 已经是结果数组。您可能应该改写data.map。

const PendingApplication = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    axios
      .get("https://rickandmortyapi.com/api/character")
      .then((response) => {
        console.log(response);
        setData(response.data.results);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <table>
        <tbody>
          {data.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.status}</td>
              <td>{item.species}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

【讨论】：

感谢您的贡献，如果我使用 data.map 而不是 [data].map 会出现类似“TypeError: Cannot read property 'map' of undefined”的错误。
在您的屏幕截图中，response.data 是一个对象。 response.data.kamData 是一个数组。当 axios 解析或在您的 api 中仅返回数组时，您可能想要执行 setData(response.data.kamData)。

【解决方案2】：

useEffect(() => {
    axios
        .get('http://localhost:5000/api/kam')
        .then((response) => {
            console.log(response);
            setData(response.data);
        })
        .catch((error) => {
            console.log(error);
        });
},[]);

return (
    <div>
        <Table>
            <TableBody>
                {data && data.map((item, index) => (
                    <TableRow key={index}>
                        <TableCell>{item.kcpname}</TableCell>
                        <TableCell>{item.companyname}</TableCell>
                        <TableCell>{item.ticketno}</TableCell>
                        <TableCell>{item.totalemp}</TableCell>
                        <TableCell>{item.kcpnid}</TableCell>
                        <TableCell>{item.kcpcontact}</TableCell>
                    </TableRow>
                ))}
            </TableBody>
        </Table>
    </div>
);

在 UseEffect 的末尾使用像这样的空方括号。一切都会好起来的。并且还要确保数据在渲染之前不为空或未定义。

【讨论】：

感谢您的贡献，它现在正在控制台上运行。但在表格中，它仍然没有渲染任何东西。
你在使用地图之前使用过数据&&吗？
是的，我做了，但还是一样。
使用data && data.map不是数据&& [数据].map
使用 data && data.map 后出现错误“TypeError: data.map is not a function”。