React搜索功能故障：获取JSON数据后页面无匹配结果展示

问题描述 #

正在开发一款带有搜索功能的React应用，目标是从接口获取JSON格式的从业者数据，并在页面展示匹配的搜索结果。调用http://localhost:8080/practitioners接口后，控制台能打印返回的25条数据，但页面始终无内容显示。

初始代码 #

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条同类数据。

问题分析 #

初始代码存在多个核心问题导致页面无内容：

1. Fetch逻辑混乱：混用async/await与.then链式调用，res实际为undefined（最后一个.then无返回值），后续res.json()和setData从未执行。
2. 过滤逻辑无效：data.includes(practitioner.address[1])的判断与搜索需求无关，无法筛选出匹配的从业者。
3. Input状态绑定错误：name初始为字符串，却绑定value={name.name}，且onChange错误将name转为对象类型，导致输入框无法正常工作。
4. 渲染字段不存在：JSON数据中无practitioner.name字段，实际应为first_name或last_name。

修复后代码 #

import { useState } from 'react';
export default function PractitionerSearch() {
    const [data, setData] = useState([]);
    const [name, setName] = useState("");
    const handleSubmit = async (event) => {
        event.preventDefault();
        try {
            fetch("http://localhost:8080/practitioners", {
                method: "GET",
                headers: { "Accept": "application/json" }
            })
                .then(response => response.json())
                .then(response => setData(response.practitioners)) // 若接口直接返回从业者数组，改为setData(response)
                .then(() => console.log(data));
        } catch (error) {
            console.log(error);
        }
    };
    
    const filtered = data.filter((practitioner) =>
        practitioner.first_name.includes(name.toUpperCase())
    );

    return (
        <div className="App">
            <label className='form-label' htmlFor='name'>
                Practitioner Name:
            </label>
            <form onSubmit={handleSubmit}>
                <input
                    className="form-input"
                    type="text"
                    placeholder="Search..."
                    id='name'
                    value={name}
                    onChange={(event) => setName(event.target.value)}
                />
                <button className="search-button" type='Submit'>
                    Submit
                </button>
            </form>
            <div>
                <ul className="map">
                    {filtered.map((practitioner) => {
                        return <li key={practitioner.npi}>{practitioner.first_name} {practitioner.last_name}</li>;
                    })}
                </ul>
            </div>
        </div>
    );
}

修复要点总结 #

• 修正数据获取逻辑：简化fetch调用，通过.then链式获取JSON数据并更新状态，确保setData执行。
• 修复过滤逻辑：根据输入的name匹配从业者的first_name，转换为大写适配数据格式，实现不区分大小写搜索。
• 修正Input状态：保持name为字符串类型，正确绑定value和onChange事件，确保输入框正常工作。
• 修正渲染字段：使用数据中存在的first_name/last_name字段，并用业务唯一标识npi作为key属性（避免使用index）。

内容的提问来源于stack exchange，提问作者YourFriendlyNewb