如何使用反應鈎子中的函數獲得價值？

Question

我正在嘗試使用 React Hook 從 API 獲取數據並將其顯示在瀏覽器中，因為我嘗試在 state 數組上使用過濾器，所以我無法獲取 output。

我已將 state 定義如下：

   const [selectedPerson, setselectedPerson] = useState(null);
   const [totalData, setTotalData] = useState([]);
   const [isfinalData, setIsfinalData] = useState(false);
   const [Bagmati, setBagmati] = useState([]);
   const [Bagmatitotal, setBagmatitotal] = useState([]);
   const [Bagdist, setBagdist] = useState([]);

以下是我的代碼：

             <select className="form-control" onChange={(e) => {

                        console.log(e.target.value);
                        let FinalDistrict = Bagmati.filter((item) => item.district === 
                        e.target.value)
                        console.log(FinalDistrict);
                         }} >
                        <option >Choose District</option>
                        {Bagdist.map((item, _id) => <option key={_id} value={item.id}> 
                        {item.title_ne}</option>)}


                        </select>

下面是我的 Output：我提供了值 28 並得到了空數組，如 Bagmati 數據中所示的 output。

但是在相同的代碼中，如果我手動提供值 28，我可以獲得 output，如下所示： 以下是我給出手動值的代碼：

                        <select className="form-control" onChange={(e) => {

                        console.log("my value is >>", 28);
                        let FinalDistrict = Bagmati.filter((item) => item.district === 28)
                        setBagmati(FinalDistrict);
                        }} >
                        <option >Choose District</option>
                        {Bagdist.map((item, _id) => <option key={_id} value={item.id}> 
                        {item.title_ne}</option>)}


                         </select>

而我的 output 是：

為什么會這樣？可能的解決方案是什么？

Answer 1

input的值是string類型，當你用 Strict Equality Comparison ===檢查它時，它會返回 false。 您可以使用Number(e.target.value)將其轉換為Number ：

Bagmati.filter(item => item.district === Number(e.target.value))