使用 NavLink 选择不适用于 useState 挂钩答案

【问题标题】：Select with NavLink doesn't work with useState hook使用 NavLink 选择不适用于 useState 挂钩
【发布时间】：2019-07-23 12:05:05
【问题描述】：

我创建了一个 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，但值永远不会改变，我无法设置值。也许有人有同样的问题？

使用选择状态：

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

【问题讨论】：

你能展示一下选择状态是什么样子的吗？你用什么来选择
你的意思是对象的样子？
我的意思是useSelectState返回的对象
添加了 useSelectState 对象

标签： reactjs typescript routing react-hooks

【解决方案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 的列表，您可能不需要上述任何内容。 react-router 将更新location，您可以使用withRouter 访问它并相应地更新您的Select。或者，您可以仅依赖 activeClassName 并仅使用 css 来显示当前值。

【讨论】：

【解决方案2】：

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

也许你可以试试这个：

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

【讨论】：

感谢您的回答，但没有帮助。
@Mantas 尝试注销 onChange 参数以查看值在哪里。例如添加以下属性来选择 onChange={event => console.log('event',event)}