React не корректно выводится значение value в options в форме select

Question

Я новичок в реакте, только разбираю. Возникла следующая проблема. В форме select к значениям options я привязываю конкретные value, которые нужны для дальнейшей сортировки елементов. Но при выборе в браузере нужного option первый раз value вообще не отображается, а дальше выводится value другого елемента. Сколько не гуглил как решить проблему не нашел. Подскажите, пожалуйста, как исправить, чтобы option при выборе, возвращал его собственное value, а не соседа. Спасибо

const Main = function (props) {
    //console.log(props)
    const [filtered, setFiltered] = useState(props.trips)
    function tripFilter(value) {
        if (value === 'all') {
            setFiltered(props.trips)
        } else {
            let newList = [...props.trips].filter(item => item.level === value)
            setFiltered(newList)
            
        }
    }
    const [value, setValue] = useState('all')
    function handleChange(event) {
        setValue(event.target.value);
        tripFilter(value)
        console.log(value)
    }
    let trip = filtered.map((p) => {
        return (
            <TripCard title={p.title} level={p.level} duration={p.duration} price={p.price} image={p.image} tripId={p.id} description={p.description} key={p.id} />)
    })
    return (
        <main>
            <section className="trips-filter" style={{ marginBottom: 50 }}>
                <h2 className="visually-hidden">Trips filter</h2>
                <form  className="trips-filter__form" autoComplete="off">
                <label className="trips-filter__search input">
                        <span className="visually-hidden">Search by name</span>
                        <input name="search" type="search" placeholder="search by title" />
                    </label>
                   
                    <label className="select">
                        <span className="visually-hidden">Search by level</span>
                        <select name="level" value={value}  onChange={handleChange}>
                            <option value="all" >level</option>
                            <option value="easy">easy</option>
                            <option value="moderate">moderate</option>
                            <option value="difficult">difficult</option>
                            </select>
                            
                    </label>

                </form>
                
            </section>

            {/* <MainFilter trips={props.trips}/> */}
            <ul className="trip-list">
                {trip}
            </ul>
        </main>
    )

}

export default Main;

Answer 1

setValue() - это асинхронная функция и console.log(value) будет возвращать старое значение. нужно либо сделать так:

function handleChange(event) {
    setValue(event.target.value);
    tripFilter(event.target.value)
    console.log(event.target.value)
}

либо использовать useEffect():

useEffect(() => {
  tripFilter(value)
  console.log(value);
}, [value]);

БЛОГ НА HUSL

React не корректно выводится значение value в options в форме select

Ответы (1 шт):