React页面无法渲染KamForms API数据且控制台重复打印数据问题求助

Let's break down and fix your two problems one by one:

1. Why the API response is printed repeatedly #

Your useEffect hook lacks a dependency array. Without this, the effect runs every single time the component re-renders (which happens often, like after state updates or prop changes). This triggers endless API calls and repeated console logs.

Quick Fix: #

Add an empty dependency array [] to useEffect so it only executes once when the component first mounts:

useEffect(() => {
  axios
    .get('http://localhost:5000/api/kam')
    .then((response) => {
      console.log(response);
      setData(response.data.kamData); // We'll fix this line next too
    })
    .catch((error) => {
      console.log(error);
    });
}, []); // Empty array = runs once on component mount

2. Why data isn't rendering to the table #

There are two critical issues blocking your data from showing up:

• Incorrect data extraction: Your backend returns data wrapped in a kamData object ({ kamData: result }), but your frontend is storing the entire response object instead of the actual array inside kamData.
• Broken mapping logic: You're wrapping data in an extra array [data] before mapping, which means you're trying to render one row for the whole array (not each individual item in the array).

Step-by-Step Fixes: #

First, update the data extraction to grab the kamData array from the response:

setData(response.data.kamData); // Instead of storing the full response object

Then, fix the mapping logic to iterate directly over the data array. Also, use a unique identifier (like MongoDB's auto-generated _id field) as the key instead of the index (indexes are unstable if items are added/removed later):

return (
  <div>
    <Table>
      <TableBody>
        {/* Add a guard clause to handle empty/loading state */}
        {data.length > 0 ? (
          data.map((item) => (
            <TableRow key={item._id}> {/* Use unique item ID for stable keys */}
              <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>
          ))
        ) : (
          <TableRow>
            <TableCell colSpan={6}>Loading or no data available</TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  </div>
);

Full Modified Frontend Code #

Here's the complete fixed component with all corrections:

const PendingApplication = () => { 
  const [data, setData] = useState([]); 
  useEffect(() => { 
    axios 
      .get('http://localhost:5000/api/kam') 
      .then((response) => { 
        console.log(response); 
        setData(response.data.kamData); // Correctly extract the array of kamForms
      }) 
      .catch((error) => { 
        console.log(error); 
      }); 
  }, []); // Ensures API call runs only once

  return ( 
    <div> 
      <Table> 
        <TableBody> 
          {data.length > 0 ? (
            data.map((item) => (
              <TableRow key={item._id}> {/* Stable unique key */}
                <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>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={6}>Loading or no data found</TableCell>
            </TableRow>
          )}
        </TableBody> 
      </Table> 
    </div> 
  ); 
};

内容的提问来源于stack exchange，提问作者stmp_lee