DEV Community

Muhammad Sibtain
Muhammad Sibtain

Posted on

I want to Prevent multiple request to an API

Here is my code , fix it with details.
Thank you.

`import "../src/App.css";
import { Button } from "@mui/material";
import { TextField } from "@mui/material";
import { Grid } from "@mui/material";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import axios from "axios";
import { useState, useEffect } from "react";

export default function Design() {
const [search, setSearch] = useState([]);
const [record, setRecord] = useState("");

const loadRecord = async () => {
try {
const res = await axios.get("https://fruityvice.com/api/fruit/all");
setSearch(res.data);
} catch (error) {
console.error("Error loading records:", error);
}
};

useEffect(() => {
loadRecord();
}, []);

const searchRecord = async (search_term) => {
try {
if (search_term.length <= 3){
// console.log(search_term)
return;
}
const res = await axios.get(https://fruityvice.com/api/fruit/${search_term});
setSearch([res.data]);
} catch (error) {
console.error("Error searching record:", error);
setSearch([]);
}
};

const getTotalNutritions = (item) => {
return Object.values(item.nutritions).reduce(
(total, value) => total + Math.trunc(value),
0
);
};

return (


Fruit Project





label="Search Fruit"
variant="outlined"
onChange={ search_term.length <=3 ? setTimeout(() => {
search_term(event.target.value)
},3000) : (e) => searchRecord(e.target.value)}
/>
      <Grid item className="outline--btn">
        <Button
          color="secondary"
          variant="contained"
          // onClick={searchRecord}
        >
          Search Fruit
        </Button>
      </Grid>
    </Grid>
  </div>
  <Table
    style={{ width: 400, margin: "auto" }}
    sx={{ minWidth: 650 }}
    aria-label="simple table"
  >
    <TableHead>
      <TableRow>
        <TableCell>Sr No</TableCell>
        <TableCell>Name</TableCell>
        <TableCell>Family</TableCell>
        <TableCell>Order</TableCell>
        <TableCell>Nutritions</TableCell>
        <TableCell>Genus</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {Array.isArray(search) && search.length > 0 ? (
        search.sort((a, b) => a.id - b.id).map((item) => (
          <TableRow
            key={item.id}
            sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
          >
            <TableCell component="th" scope="row">
              {item.id}
            </TableCell>
            <TableCell>{item.name}</TableCell>
            <TableCell>{item.family}</TableCell>
            <TableCell>{item.order}</TableCell>
            <TableCell>{getTotalNutritions(item)}</TableCell>
            <TableCell>{item.genus}</TableCell>
          </TableRow>
        ))
      ) : (
        <TableRow>
          <TableCell colSpan={2} align="center">
            {search.length === 0 ? "No data available" : "Loading..."}
          </TableCell>
        </TableRow>
      )}
    </TableBody>
  </Table>
</div>

);
}`

react #react-js #js #javaScript

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay