ReactJS 实现对象数组逐字符搜索过滤及输入校验功能问题

原代码高频报错原因 #

• state初始化语法错误：构造函数内定义state时，错误使用了names = [{...}]的赋值写法，不符合对象字面量的键值对规范，会直接触发语法解析失败
• 类型调用错误：数组过滤的回调中，直接对作为对象的数组元素调用toLowerCase()字符串方法，没有先取出元素内的name字段做匹配，会触发运行时类型报错
• 渲染逻辑错位：直接把整个人员数组传给单个NameItem组件，没有遍历数组生成对应数量的组件实例，会导致页面渲染异常
• 状态设计冲突：将全量原始人员数据和过滤后的数据存在同一个state字段中，每次过滤操作都会覆盖原始数据，导致清空输入时无法恢复展示全量列表
• 受控输入绑定错误：input的value属性绑定了不存在的this.state.name字段，导致输入框无法正常响应输入内容

修正后的可运行代码 #

import React from 'react';
import NameItem from "./component/NameItem";

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            // 存储输入框的实时内容
            searchTerm: '',
            // 全量原始人员数据，作为过滤的基准源，不会被过滤操作覆盖
            allNames: [
                { name: 'Roony', about: 'He is a student' },
                { name: 'Rocky', about: 'He is a player' },
                { name: 'Ronny', about: 'He is a singer' }
            ]
        };
    }

    // 输入框内容变化的统一处理逻辑
    handleInputChange = (event) => {
        const inputValue = event.target.value;
        // 空白输入校验：如果用户输入的内容全是空格，且不是主动清空输入框，弹出无效提示
        if (inputValue.trim() === '' && inputValue.length > 0) {
            alert('请输入有效内容，禁止输入纯空白字符');
            // 重置无效输入内容
            this.setState({ searchTerm: '' });
            return;
        }
        this.setState({ searchTerm: inputValue });
    }

    render() {
        const { searchTerm, allNames } = this.state;
        // 渲染阶段实时计算需要展示的列表，无需冗余存储过滤结果到state
        const visibleList = allNames.filter(person => {
            // 不区分大小写匹配：人员名称以输入内容开头
            return person.name.toLowerCase().startsWith(searchTerm.trim().toLowerCase());
        });

        return (
            <>
                <div>
                    <label>Search Person: </label>
                    <input 
                        type="text" 
                        value={searchTerm} 
                        id="searchEmp"
                        placeholder="Enter Person's Name"
                        onChange={this.handleInputChange}
                    /><br/>
                </div>
                <ul>
                    {/* 遍历过滤后的列表，每个人员单独作为item传入NameItem，保证完整信息展示 */}
                    {visibleList.map((person, index) => (
                        <NameItem key={index} item={person} />
                    ))}
                </ul>
            </>
        );
    }
}

export default App;

功能匹配说明 #

• 实时过滤效果：逐字符输入时，自动筛选出所有名称以输入内容（不区分大小写）开头的人员，连同对应的about附属信息一同展示
• 输入校验逻辑：检测到纯空白输入时，立即弹出窗口提示用户输入有效内容
• 交互补全：清空输入框时，自动恢复展示全量人员列表

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