为什么此 API 数据未呈现到 React 页面？

Question

API 用于获取所有 kamForms 数据

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

Answer 1

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 的末尾使用像这样的空方括号。一切都会好起来的。还要确保数据在渲染前不为 null 或 undefined。

Answer 2

两个问题。

首先，您在 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>
  );
};

为什么此 API 数据未呈现到 React 页面？

Why This API data is not rendering to React Page?

javascript

arrays

mern