Выбор с NavLink не работает с ловушкой useState

Question

Я создал Select, который используется для навигации по странице.Выберите опции NavLinks.Это выглядит так:

<Select
   placeholder={PLACEHOLDER}
   items={ITEMS} // array of NavLinks
   {...selectState} // State of select option change
   className={style.select}
/>

После изменения опции я вызываю функцию:

function useSelectState(initValue) {
    const [value, setValue] = useState(initValue);
    return { value, onChange: setValue }  
}

Итак, я получаю правильное значение initValue, но значение никогда не меняется, и я не могу установить setValue.Может быть, у кого-то была такая же проблема?

UseSelectState:

{$$typeof: Symbol(react.element), type: ƒ, key: null, ref: null, props: {…}, …}
$$typeof: Symbol(react.element)
key: null
props: {label: "Home", path: "/"}

Answer 1

useState должен вызываться внутри вашего рендера.Вы не должны называть его самостоятельно после каких-либо обновлений.

Для простого выбора:

function useSelectState(initValue) {
    const [value, setValue] = useState(initValue);
    return { value, onChange: e => setValue(e.target.value) }  
}

function MyComponent(props) {
    const params = useSelectState(props.initValue);

    return (
        <select {...params}>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    );
}

Для списка NavLink вам, вероятно, ничего из вышеперечисленного не нужно.Реактив-маршрутизатор обновит location, и вы можете использовать с роутером , чтобы получить к нему доступ и соответственно обновить Select.В качестве альтернативы вы можете просто положиться на activeClassName и использовать только css для отображения текущего значения.

Answer 2

Я думаю, что проблема может заключаться в том, что с помощью метода onChange вы получаете событие как параметр, а не само значение.

Может быть, вы можете попробовать это:

function useSelectState(initValue) {
  const [value, setValue] = useState(initValue);
  return { value, onChange: (event) => setValue(event.target.value) }  
}