Почему состояние обновляется только после двойного вызова с использованием React Hooks? - PullRequest
Новая
       40

Почему состояние обновляется только после двойного вызова с использованием React Hooks?

0 голосов
/ 14 июля 2020

Я застрял, пытаясь понять, почему мое состояние не обновляется, пока я не изменю значение во вводе текста дважды (вызывая функцию handleChange). Что я здесь делаю не так? 

import React, {useEffect, useState} from "react";

export default function Typeahead(props){
    const {list}  = props;
    const [colorList] = useState(list.map(element => element.toLowerCase()));
    const [color,setColor] = useState();
    const [showResults, setShowResults]= useState(false);
    const [results,setResults]= useState();

    let handleChange = (e) =>{
        setShowResults(true);
        setColor(e.target.value.toLowerCase());
        const match = (colorList) =>{
            return colorList.startsWith(color,0);
        };
        const matches = colorList.filter(match);
        setResults((matches));

        console.log(results);
        console.log(showResults);
    };

    useEffect(() => {

        //setResults(list.map(elements => elements.toLowerCase()));
    }, [results]);

        return(
            <div>
                <input type= "text" onChange={handleChange}/>
                {showResults ?
                    <div>
                        {results.map((options) => {
                            return (
                                <option key={options} value={options}> {options}</option>
                            )
                        })}
                    </div>
                    : null }
            </div>
        );
}
...