Question

我正尝试使用实时搜索功能过滤国家/地区列表，但是每当我按退格键时，它都不会更新状态数组。

因此，我尝试在CodePen上搜索问题的潜在解决方案，并且在此示例中使用了完全相同的代码，但在我的情况下它不起作用。

这是搜索字段所在的整个组件。

import React, { useEffect, useState } from 'react'
import CountryList from '../components/CountryList';
import axios from 'axios'
import SearchForm from '../components/SearchForm';

export default () => {
    const [countries, setCountries] = useState( [] )
    const [search, setSearch] = useState( '' )

    useEffect(() => {
        axios.get( 'https://restcountries.eu/rest/v2/all' )
        .then( response => {
            setCountries( response.data )
        } )
    }, [])

    const onSearch = e => {
        const searchQuery = e.target.value.toLowerCase()
        setSearch( e.target.value )

        const filteredCountries = countries.filter( country => {
            const searchValue = country.name.toLowerCase()

            return searchValue.indexOf( searchQuery ) > -1
        } )

        setCountries( filteredCountries )
    }

    return (
        <main className="CountriesPage">
            <input
                type="search"
                value={ search }
                onChange={ onSearch }
            />
            <CountryList data={ countries } />
        </main>
    )
}

我还提供了一个gif here。

键入实时搜索字段并为其设置后退时，预期结果应该是一组正确更新的国家/地区。

感谢您的帮助！

Answer 1

您要在此处过滤您的国家/地区数组：

const filteredCountries = countries.filter( country => {
     const searchValue = country.name.toLowerCase()

     return searchValue.indexOf( searchQuery ) > -1
} )

setCountries( filteredCountries )

最后，将您的国家/地区设置为已过滤国家/地区的列表。如果您从5个国家/地区开始，现在可能已将国家/地区中的列表过滤为0个元素。当您按下退格键时，您并没有使用原始条目填充该国家/地区阵列，因此当您再次进行过滤时，您现在正在过滤的列表中没有任何内容。

将过滤后的国家/地区存储在州中，并且不要将国家/地区数组设置为过滤后的国家/地区。然后显示过滤后的国家，而不是国家。

Answer 2

感谢您的帮助。我通过阅读Snukus' post解决了该解决方案。

export default () => {
    const [countries, setCountries] = useState( [] )
    const [search, setSearch] = useState( '' )
    const [filter, setFilter] = useState( [] ) //added

    useEffect(() => {
        axios.get( 'https://restcountries.eu/rest/v2/all' )
        .then( response => {
            setCountries( response.data )
        } )
    }, [])

    const onSearch = e => {
        console.log( filter );
        const searchQuery = e.target.value.toLowerCase()
        setSearch( e.target.value )

        const filteredCountries = countries.filter( country => {
            const searchValue = country.name.toLowerCase()

            return searchValue.indexOf( searchQuery ) > -1
        } )

        setFilter( filteredCountries ) // updated
    }

    return (
        <main className="CountriesPage">
            <input
                type="search"
                value={ search }
                onChange={ onSearch }
            />
            <CountryList data={ filter.length ? filter : countries } /> // updated
        </main>
    )
}

React状态未在Backspace上更新

2 个答案: