使用 <Link> 从 useState() 钩子传递 setState答案

【问题标题】：Pass setState from useState() hook using <Link>使用 <Link> 从 useState() 钩子传递 setState
【发布时间】：2019-10-20 20:01:06
【问题描述】：

我在尝试使用 <Link> 从 useState 钩子传递 setState 时遇到 react-router 问题。我做错了什么？

我创建了一个简单的项目来显示问题： https://codesandbox.io/s/restless-surf-mj2vx?fontsize=14

打开控制台并点击链接查看错误。

  const [state, setState] = useState(0);

  return (
    <div className="App">
      <Link to={{ pathname: "/test", state: { state, setState } }}>test</Link>
      <Switch>
        <Route path="/test" component={Test} />
      </Switch>
    </div>
  );
}

我收到此错误，但无法帮助我解决问题：

“未捕获的 DOMException：无法在 'History' 上执行 'pushState'：无法克隆 function () { [native code] }。”

【问题讨论】：

它试图将您作为state 传递的内容克隆到Link，但无法克隆setState 函数。为什么你将它作为状态传递？
Failed to execute 'pushState' on 'History' error when using window.history.pushState function的可能重复
离开当前组件时传递setState更新程序回调的意义何在？

标签： javascript reactjs react-router

【解决方案1】：

如果您需要<Test /> 组件中的setState 函数，请将其与路由一起传递：

const [state, setState] = useState(0);

return (
    <div className="App">
        <Link to={{ pathname: '/test' }}>test</Link>
        <Switch>
            <Route
                path="/test"
                render={props => (
                    <Test {...props} state={state} setState={setState} />
                )}
            />
        </Switch>
    </div>
);

【讨论】：

感谢您的回答。这是有道理的。你会考虑在这种情况下使用上下文吗？我在中传递它的主要动机是更新保持在父组件状态的数组。由于链接导致表单向列表中添加了一个新元素。似乎在这种情况下，上下文将允许以更好的方式对其进行管理。
如果通过state 和setState 几个级别变得笨拙，请使用上下文，否则它可能不是正确的解决方案。我总是在不使用上下文的情况下开始，除非我知道它是所有组件可能需要的东西（例如登录状态和语言设置）。