我如何使用React Hook中的函数获取值?

问题描述 投票:1回答:1

我正在尝试使用React Hook从API提取数据并在浏览器中显示它,因为我试图在状态数组上使用过滤器,所以我无法获得输出。

我已将状态定义如下:

   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>

以下是我的输出:我提供了值28,并得到了一个空数组作为下示在Bagmati数据中的输出。

enter image description here

但是在相同的代码中,如果我手动提供值28,则我可以得到输出,如下所示:以下是我给定的手动值代码:

                        <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>

我的输出是:

enter image description here

为什么会发生?解决方案可能是什么?

javascript reactjs frontend
1个回答
0
投票

input中的值是string类型,当您使用严格相等比较===进行检查时,它将返回false。您可以使用Number(e.target.value)将其转换为Number

Bagmati.filter(item => item.district === Number(e.target.value))
© www.soinside.com 2019 - 2024. All rights reserved.