How to make new axios request when onChange is triggered?-CodePudding

I am trying to display data based on a dropdown. When selection changes I am invoking onChange which gathers the new backend link(I am using axios for that). I know useEffect dosen't work inside a JS function(don't mind the code commented as that is working) but how can I achieve this so that when my selection changes then a new axios request is made which will gather the data based on the value of the selection.

import React, {useEffect, useState} from 'react';
// import axios from "axios";
import axios from "./axios";
import Table from './Table';

function Data() {

    const[people,setPeople]= useState([]);
    // useEffect(() =>{
    //     async function fetchData() {
    //         const req = await axios.get("/All");

    //         setPeople(req.data);
    //     }

    //     fetchData();
    // }, []);

    // console.log(people);

    function handleChange(e){
        return (
            useEffect(() =>{
                async function fetchData() {
                    const req = await axios.get(e.target.value);

                    setPeople(req.data);
                }

                fetchData();
            },[])
        );
    }

    return (
        <div>
            <div>
                <form action="/action_page.php">
                    <label for="cars">Manufacturer:</label>
                    <select name="cars" id="cars" onChange={handleChange}>
                        <option selected value="All" >All</option>
                        <option value="Apple" >Apple</option>
                        <option value="OnePLus" >One Plus</option>
                        <option value="Samsung" >Samsung</option>
                        <option value="Google" >Google</option>
                        <option value="Sony" >Sony</option>
                        <option value="Huawei" >Huawei</option>
                    </select>
                </form>
            </div>
            <Table data={people}/>
        </div>
    )
}

export default Data

This is the backend code:

import express from "express";
import bodyParser from "body-parser";
import mysql from "mysql";
import Cors from "cors";

const app=express();
const port= process.env.PORT || 8001;
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.json());
app.use(Cors());

const db = mysql.createPool({
    host: "localhost",
    user: "root",
    password: "MySQL@05",
    database: "interview"
});

app.get("/", (req, res)=> {
        
    res.send("Hello World!!");
   
});

app.get("/All", (req,res)=> {
    const abc = "select * from products";
    db.query(abc, (err,result)=> {
        res.send(result);
    });
});

app.get("/Apple", (req,res)=> {
    const abc = "select * from products WHERE manufacturer='Apple'";
    db.query(abc, (err,result)=> {
        res.send(result);
    });
});

app.get("/Samsung", (req,res)=> {
    const abc = "select * from products WHERE manufacturer='Samsung'";
    db.query(abc, (err,result)=> {
        res.send(result);
    });
});

app.get("/OnePlus", (req,res)=> {
    const abc = "select * from products WHERE manufacturer='One Plus'";
    db.query(abc, (err,result)=> {
        res.send(result);
    });
});

app.get("/Google", (req,res)=> {
    const abc = "select * from products WHERE manufacturer='Google'";
    db.query(abc, (err,result)=> {
        res.send(result);
    });
});

app.get("/Huawei", (req,res)=> {
    const abc = "select * from products WHERE manufacturer='Huawei'";
    db.query(abc, (err,result)=> {
        res.send(result);
    });
});

app.get("/Sony", (req,res)=> {
    const abc = "select * from products WHERE manufacturer='Sony'";
    db.query(abc, (err,result)=> {
        res.send(result);
    });
});

app.listen(port, ()=> {
    console.log("Listening on port");
});

CodePudding user response：

You should add dropdownValue as dependency, only trigger request when data change, not the event like click/onchange:

const [people, setPeople] = useState([]);
const [dropdownValue, setDropdownValue] = useState('All');
const fetchData = async () {
    const req = await axios.get("/All");
    setPeople(req.data);
}
const handleChange = (e) {
    setDropdownValue(e.target.value)
}
useEffect(() => {
    fetchData();
}, [dropdownValue]);

CodePudding user response：

useEffect enables you to run something whenever the the component is rendered or when a state changes. Having that inside of a function that is called on click makes it useless. useEffect should call other functions, but should never be called from within a function.