目前,我正在开发一个带有搜索功能的React应用程序,尝试获取JSON数据并在网站上显示匹配的搜索结果
import { React, useState } from 'react';
export default function PractitionerSearch() {
const [data, setData] = useState([]);
const [name, setName] = useState("");
const handleSubmit = async (event) => {
event.preventDefault();
try {
const res = await fetch("http://localhost:8080/practitioners", {
method: "GET",
headers: { "Accept": "application/json" }
})
.then(response => response.json())
.then(response => { console.log(response); });
if (!res) {
return Error(`Error! status: ${res}`);
} else if (res.status === 200) {
return res
}
const data = await res.json();
setData(data);
} catch (error) {
console.log(error);
}
};
const filtered = data.filter((practitioner) =>
data.includes(practitioner.address[1])
);
return (
<div className="App" style={{ padding: '20px' }}>
<label className='form-label' htmlFor='name'>
Practitioner Name:
</label>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Search..."
id='name'
value={name.name}
onChange={(event) => setName({
...name,
[event.target.name]: event.target.value,
})}
/>
<button className="search__button" type='Submit'>
Search
</button>
</form>
<ul>
{filtered.map((practitioner) => {
return <li>{practitioner.name}</li>;
})}
</ul>
</div>
);
}
这是JSON的一个例子
"practitioners": [
{
"address": [
{
"addr1": "12 W 12 Dr",
"addr2": "",
"city": "Moon",
"fax": "",
"insurances": [],
"isPrimary": "false",
"phone": "5555555555",
"state": "PA",
"zip": "55555"
},
{
"addr1": "13 W 13 Dr",
"addr2": "",
"city": "North Pole",
"fax": "",
"insurances": [],
"isPrimary": "false",
"phone": "8888888888",
"state": "ND",
"zip": "88888"
},
{
"addr1": "14 W 14 Dr",
"addr2": "",
"city": "Somewhereville",
"fax": "",
"insurances": [],
"isPrimary": "true",
"phone": "2222222222",
"state": "AZ",
"zip": "88888"
}
],
"credential": [
"PT",
"DPT"
],
"first_name": "DAVE",
"gender": "m",
"last_name": "JONES",
"npi": "2342143124",
"specialty": [
"Physical Therapist"
]
},
当我控制台记录响应时,我得到...
(25)[{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...},{...},{...},{...}] 0:{地址:阵列(3),凭据:数组(2),名字:'JOY',性别:“f”,姓氏:“斯科特”,...}
但页面上没有显示任何内容
1条答案
按热度按时间qmb5sa221#
此行:
应为: