Javascript 打印过滤后的数据以获得不同的结果

我是React.js新手（使用钩子），希望通过简单的编码来学习，我的问题是我正在从ksngfr.com/something.txt获取数据，我从那里获取的数据如图所示（在图中我刚刚从1-4输入，但它是从1-50输入的）。出于某种原因，例如，当我在输入'3'中写作时，它会给我这个（第一张图片）。 我在网上查过了，找到了这个解决方案。我想实现这一点：当用户在输入中写入例如数字“3”时，它应该转到数据并检查数字3（即3:95426），然后返回结果，没有其他结果，就像一个框（数字3）和另一个框的值“95426”。英语不是我的母语，抱歉出错

我正在获取的数据：

我的代码：

函数应用程序（）{
const[data，setData]=useState（[]）；
const[searchResults，setSearchResults]=useState（[]）；
常量[searchTerm，setSearchTerm]=useState（“”）；
常量obj={}；
useffect（（）=>{
常量fetchData=（）=>{
让corsAnywhere=”https://cors-anywhere.herokuapp.com/";
让某物=”http://ksngfr.com/something.txt";
获取（corsAnywhere+某物）
.然后（（response）=>response.text（））
。然后（（结果）=>{
const thedata arr=result.replace（/\n/g，“”）；
常数f=数据列拆分（“”）；
setData（f）；
});
};
fetchData（）；
}, []);
data.forEach（（d）=>{
var propertyK=d.split（“：”[0]；
var propertyv=d.split（“：”[1]；
obj[propertyK]=propertyv；
});
常数k=对象键（obj）；
useffect（（）=>{
const results=k.filter（（个人）=>
person.toLowerCase（）.includes（searchTerm）
);
设置搜索结果（结果）；
}，[searchTerm]）；
控制台日志（数据）；
返回(
setSearchTerm（e.target.value）}
/>
{searchResults.map（（值，索引）=>(
))}
);
}
导出默认应用程序如果提取工作正常，请尝试此代码


函数应用程序（）{
const[data，setData]=React.useState（[]）；
常量[searchResults，setSearchResults]=React.useState（[]）；
const[searchTerm，setSearchTerm]=React.useState（“”）；
常量fetchData=（）=>{
让corsAnywhere=”https://cors-anywhere.herokuapp.com/";
让something=“ksngfr.com/something.txt”；
获取（corsAnywhere+某物）
.然后（（response）=>response.text（））
。然后（（结果）=>{
const thedata arr=result.replace（/\n/g，“”）；
常数f=数据列拆分（“”）；
setData（f）；
});
};
React.useffect（（）=>{
fetchData（）；
}，[searchTerm]）；
React.useffect（（）=>{
if（数据长度）{
const mappedResult=data.map（（d）=>{
var propertyK=d.split（“：”[0]；
var propertyv=d.split（“：”[1]；
返回{
钥匙：propertyK，
价值：propertyv
};
});
const results=mappedResult.filter（（each）=>each.key==searchTerm）；
log（“结果为：”，results）；
设置搜索结果（结果）；
}
}，[数据，搜索词]；
返回(
setSearchTerm（e.target.value）}
/>
{searchResults.map（{key，value}，index）=>(
{`value为：${value}，key为：${key}`}
))}
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
为什么要这样使用
获取
<代码>让corsAnywhere=”https://cors-anywhere.herokuapp.com/";       让某物=”http://ksngfr.com/something.txt";        获取（corsAnywhere+something）
“https://cors-anywhere.herokuapp.com/" + "http://ksngfr.com/something.txt“
不是有效的
获取的url
此“”不是真实地址，我只是举个例子，在这个地方，我有真实地址，但不能把它放在这里。抓取似乎有效，但在代码中，为了得到结果，我遇到了一些问题。我得到的结果不同。值是：1，索引是：0。值是：2，索引是：1。值是：3，索引是：2。值是：4，索引是：3是95426'，根据该数据，我不知道
fetch
的确切结果是什么，因此我可以提供更多帮助。你想让我隐藏url吗？我更新我的答案检查一下