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

Question

我想在用戶選擇所需值后使用 id 將 url 中的特定數據呈現到表中，所以這是我的代碼：為選擇選項獲取數據：

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);
  };

現在在儀表板功能中獲取所選值的數據：

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,
    ]);
  };

現在渲染數據作為回報：

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

但是在選擇所需的值后什么也沒有出現，我該如何修復它，並且反應是否允許使用這樣的選定值？

數據

[
  {
    "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

因此，根據評論部分中的對話，值在selected 。 那么唯一的問題是useEffect由於空依賴數組而不會在更改時觸發。

我建議對您的代碼進行一些修改：

1. 添加到selected為[selected]的依賴項數組，一旦您更改了該狀態，它將觸發該功能。
2. 檢查null或undefined值，以免在沒有值的情況下進行連接。
3. 此外，我在users之后在您的 URL 中添加了一個額外的斜杠，所以現在是users/ 。
4. 所以 URL 將在一天結束時：

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

根據解釋嘗試如下：

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 建議：

也許它不相關，但您在.map()一個可能不需要的額外[] ，因此請嘗試：

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

這樣.map()將返回一個對象數組，其屬性為id 、 name 、 username 。