当搜索数据在反应中变为空白时，表中的搜索不起作用

Question

我有一个小应用程序，它由一个搜索栏和一个包含数据的表格组成。可以使用搜索栏搜索数据。当用户在搜索栏中输入内容时，我正在使用 lodash debounce 过滤表数据。到现在为止还挺好。当通过按退格键删除搜索词时会出现问题。我希望表格在没有输入或输入被擦除时恢复初始数据。

type IType = {company: string, city: string, domain: string}

export const App: React.FC = () => {
    const [userInput, setUserInput] = useState<string>('');
    const [tableData, setTableData] = useState<IType[]>(data);

    const filterTable = ()=>{
        const filteredData = tableData.filter((data)=>data.company.toLowerCase().includes(userInput)
         || data.city.toLowerCase().includes(userInput)
         || data.domain.toLowerCase().includes(userInput));
        // eslint-disable-next-line no-console
        console.log('filteredData', filteredData);
        filteredData.length === data.length ?  setTableData([...data]) : setTableData([...filteredData]);
    };

    const debouncedData = useCallback(debounce(filterTable, 1000), [userInput]);

    useEffect(() => {
        debouncedData();
    }, [userInput]);

    const onChangeHandler:
    (event: React.ChangeEvent<HTMLInputElement>) => void = (event) => setUserInput(event.target.value);


    return (
        <div style={mainWrapper}>
            <SearchBar userInput={userInput} onChangeHandler={onChangeHandler} />
            <Table tableData={tableData}/>
        </div>
    );
}

;

Answer 1

你可以做conditional rendering。

如果搜索输入为空字符串，则只显示原始的data 而不是计算出来的tableData。

type IType = {company: string, city: string, domain: string}

export const App: React.FC = () => {
    const [userInput, setUserInput] = useState<string>('');
    const [tableData, setTableData] = useState<IType[]>(data);

    const filterTable = ()=>{
        const filteredData = tableData.filter((data)=>data.company.toLowerCase().includes(userInput)
         || data.city.toLowerCase().includes(userInput)
         || data.domain.toLowerCase().includes(userInput));
        // eslint-disable-next-line no-console
        console.log('filteredData', filteredData);
        filteredData.length === data.length ?  setTableData([...data]) : setTableData([...filteredData]);
    };

    const debouncedData = useCallback(debounce(filterTable, 1000), [userInput]);

    useEffect(() => {
        debouncedData();
    }, [userInput]);

    const onChangeHandler:
    (event: React.ChangeEvent<HTMLInputElement>) => void = (event) => setUserInput(event.target.value);


    return (
        <div style={mainWrapper}>
            <SearchBar userInput={userInput} onChangeHandler={onChangeHandler} />
            <Table tableData={userInput === "" ? data : tableData}/>
        </div>