将 ReactRouter 与路由器一起使用不适用于 React Hook

Question

似乎我不能在包装在 React 路由器的withRouter函数调用中的功能组件内部使用useState React Hook

。

我需要withRouter调用才能从浏览器获取 URL 参数。

function TheComponent(props) {
    const { id } = props.match.params;
    // this is returning null for both done & setDone
    const {done, setDone} = useState(false);
    // some code that's using id
    return <div>
       // some tags here
    </div>
}
export default withRouter(function(props) {
     return <TheComponent {...props} {...this}  />
});

添加withRouter似乎会阻止 Hook 工作。

我该如何解决这个问题？

我尝试在函数调用中添加 Hook，但这不起作用：

export default withRouter(function(props) {
     const {done, setDone} = useState(false);
     return <TheComponent {...props} {...this} done={done} setDone={setDone}  />
});

我想我需要了解的主要事情是 Hooks 的局限性是什么？似乎无法在 withRouter HOC 函数中声明它们。这是对的吗？以及我如何解决这个问题，因为我需要使用我需要withRouter函数的 URL 参数。

Answer 1

你对

useState 函数返回的内容使用了错误的语法。应使用方括号而不是大括号。

来自 React 文档以供使用状态：

const [fruit, setFruit] = useState('banana');

当我们使用 useState 声明一个状态变量时，它会返回一对 — 一个 包含两个项目的数组。第一项是当前值，以及 第二个是让我们更新它的函数。使用 [0] 和 1 到 访问它们有点令人困惑，因为它们具有特定的含义。 这就是我们使用数组解构的原因。

编辑：正如其他人所说，您还应该将 props 值作为参数传递到您的函数中。

Answer 2

您忘了向组件添加参数：

function TheComponent(props) {
    const { id } = props.match.params;
    // this is returning null for both done & setDone
    const {done, setDone} = useState(false);
    // some code that's using id
    return <div>
       // some tags here
    </div>
}

Answer 3

你的代码的主要问题是你没有在 TheComponent 的构造函数中获取 props，但如果它违反了钩子的规则，你可以使用这个其他 aproach。

const TheComponent = (match) => {
        //you can destruct from props direct on parameters if you want
        const { id } = match.params;
        const [done, setDone] = useState(false);
        return <div>
           // some tags here
        </div>
    }
    export const WrapperComponent = withRouter((props) => {
      //you can destruct from props direct on parameters if you want
      const { match } = props;
      return <TheComponent match={match} />
    });