Wyszukiwarka - znikające elementy z tablicy state

0

Mam problem z wyszukiwarką mianowicie nie działa jak należy. Gdy wpisuję w input jakiś tekst to cos tam wyszukuje, ale gdy usunę to znikają wszystkie elementy. Prosze o pomoc.
State zawiera nazwy pobrane z api

const courseReducer = (state, action) => {
        switch (action.type) {
 case 'SEARCH':
                return state.filter(task => task.name.toLocaleLowerCase().includes(action.searchText))
}
}
 const [state, dispatch] = useReducer(courseReducer, [])

Form.js

const Form = () => {
    const { dispatch, state } = useContext(DataContext)
    const [text, setText] = useState('')

    const handleInput = event => {
        setText(event.target.value)
        const searchText = text.toLocaleLowerCase();
        dispatch({ type: 'SEARCH', searchText })
    }
return (
<input type="text" value={text} onChange={handleInput} />
}
3

Bo cały czas filtrujesz jedną tablicę, więc naturalne, że cały czas robi się mniejsza.

State zawiera nazwy pobrane z api

Zawiera może na początku, a po akcji SEARCH następuje przefiltrowanie, więc już zawiera to, co przefiltrowałeś.

Można powiedzieć, że udało ci się zasymulować mutowalność za pomocą niemutowalności :D

Ogólnie w takich sytuacjach należałoby trzymać gdzieś oryginalne dane tak, żeby filtr nie kolidował z oryginalnym źródłem.

0

Hm czyli musze zrobic kopie stanu w handleInput i zrobic filtrowanie w tej funkcji i wynik przeslac do recucera ?

2

Hm czyli musze zrobic kopie stanu w handleInput i zrobic filtrowanie w tej funkcji i wynik przeslac do recucera ?

Dlaczego w handleInput? I po co kopię? Wystarczy, że będziesz miał gdzieś zachowaną oryginalną tablicę (np. w stanie, tylko wtedy stan by musiał być obiektem, który trzymałby dwie tablice - oryginalną i przefiltrowaną) i nie będziesz jej zmieniał.

A jak ustawiasz stan (wypełniasz tablicę danymi)? W kodzie, który wkleiłeś, nie do końca jest to jasne (jakby brakowało czegoś).

0

Zatem musze stworzyć drugiego reducera i w nim trzymac wszystkie pobrane dane, a wdrugim reducerze przefiltorwane ? Przepraszam, ze głupie pytania, ale troche sie w tym pogubilem

const [state2, dispatch2] = useReducer(courseReducer2, []) ?

Tak wypełniam tablicę danymi:

const fetchAsync = async () => {
        const response = await fetch("https://jsonplaceholder.typicode.com/users")
        const data = await response.json()
        dispatch({ type: "FETCH", data })
    }
    useEffect(() => {
        fetchAsync()
    }, [])

i reducer:

const courseReducer = (state, action) => {
        switch (action.type) {
case 'FETCH':
                return action.data
 case 'SEARCH':
                return state.filter(task => task.name.toLocaleLowerCase().includes(action.searchText))
}
}
 const [state, dispatch] = useReducer(courseReducer, [])

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0