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

我认为问题可能在于，使用onChange方法可以将事件作为参数而不是值本身。

也许您可以尝试以下方法：

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

Answer 2

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的列表，您可能不需要上面的任何内容。 react-router将更新location，您可以使用withRouter来访问它并相应地更新Select。另外，您可以仅依靠activeClassName并仅使用CSS来显示当前值。

使用NavLink进行选择不适用于useState钩子

2 个答案: