JavascriptReact搜索函数显示JSON结果

u3r8eeie  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(116)

目前,我正在开发一个带有搜索功能的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”,姓氏:“斯科特”,...}
但页面上没有显示任何内容

qmb5sa22

qmb5sa221#

此行:

.then(response => { console.log(response); });

应为:

.then(response => setData(response))

相关问题