如何使用 React 下拉列表中的选定值作为 api url id？

Question

I want to render into table specific data from url with id taken after user select the needed value so here is my code: fetching data for select options:

export default function Dashboard() {
  
const [value, setValue] = useState();
  const [students, setstudents] = useState([]);
  useEffect(() => {
    const fetchStudents = async () => {
      try {
        const resp = await Axios({
          method: "GET",
          url: "https://jsonplaceholder.typicode.com/users",
          headers: {
            "Content-Type": "application/json",
          },
        });
        setstudents(resp.data);
      } catch (err) {}
    };
    fetchStudents();
  }, []);
  
  const classes = useStyles();
  const [selected,setselected]=useState();
  
  const options = students.map(s => ({
    "value" : s.id,
    "label" : s.username
  }))
  const handleChange = (event) => {
    setselected(event.value);
  };

now fetching data in dashboard function for selected value:

const [tabl, settabl] = useState([]);
  useEffect(() => {
    const fetchtabl = async () => {
      try {
        const resp = await Axios({
          method: "GET",
          url: "https://jsonplaceholder.typicode.com/users"+{selected},
          headers: {
            "Content-Type": "application/json",
          },
        });
        settabl(resp.data.surveys);

      } catch (err) {
        console.log(err);
      }
    };
    fetchtabl();
  }, []);
  const getTableData = (tabl) => {
    return tabl.map((tab) => [
      tab.id,
      tab.name,
      tab.username,
    ]);
  };

now render data in return:

 Select the course:
          <Select options={options} onChange={handleChange}/>
  <Table
              tableHead={["Course Code", "Course Name", "Survey Link"]}
              tableData={getTableData(tabl)}
              tableHeaderColor="primary"
            />

but nothing appear after select the value needed how can i fix it and does react allow to use selected value like this?

data

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157",
      "geo": {
        "lat": "-68.6102",
        "lng": "-47.0653"
      }
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info",
    "company": {
      "name": "Romaguera-Jacobson",
      "catchPhrase": "Face to face bifurcated interface",
      "bs": "e-enable strategic applications"
    }
  },

Answer 1

So based on the conversation in the comment section the value is there in selected . Then the only problem is useEffect is not triggered on change because of empty dependency array.

I suggest few modifications in your code:

1. Add to the dependency array selected as [selected] which will trigger the function once you have change on that state.
2. Check for null or undefined values in order not to concatenate without value.
3. Also I added one extra slash into your URL after users so now it's users/ .
4. So the URL would be at the end of the day:

`https://jsonplaceholder.typicode.com/users/${selected}`

Based on the explanation try as:

useEffect(() => {
    const fetchtabl = async () => {
      try {
        const resp = await Axios({
          method: "GET",
          url: `https://jsonplaceholder.typicode.com/users/${selected}`,
          headers: {
            "Content-Type": "application/json",
          },
        });
        settabl(resp.data.surveys);

      } catch (err) {
        console.log(err);
      }
    };

    if (selected) {
       fetchtabl();
    }
}, [selected]);

+1 suggestion:

Maybe it's not related but you have in .map() an extra [] which might be not needed, so try as:

const getTableData = (tabl) => {
    return tabl.map((tab) => ({
      tab.id,
      tab.name,
      tab.username,
    }));
};

In this way .map() will return an array of objects with the properties of id , name , username .