我正在尝试使用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数据中的输出。
但是在相同的代码中,如果我手动提供值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>
我的输出是:
为什么会发生?解决方案可能是什么?
input
中的值是string
类型,当您使用严格相等比较===
进行检查时,它将返回false。您可以使用Number(e.target.value)
将其转换为Number
:
Bagmati.filter(item => item.district === Number(e.target.value))