时间戳

首页 > 解决方案 > 反应状态未在退格键上更新

reactjs - 反应状态未在退格键上更新

问题描述

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

因此，我尝试在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 。

输入和退格实时搜索字段时，预期结果应该是正确更新的国家/地区数组。

谢谢您的帮助！

标签： reactjs

解决方案

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

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

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

setCountries( filteredCountries )

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

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

推荐阅读