Question

似乎我不能在包装为React Router的useState函数调用中的Functional组件内部使用React Hook withRouter。

我需要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，但这没有用：

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

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

Answer 1

对于useState函数返回的内容，您使用了错误的语法。您应该使用方括号而不是花括号。

从React docs中获得useState：

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的构造函数中获得道具，但是如果它破坏了钩子规则，则可以使用其他方法。

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} />
    });

将ReactRouter与Router一起使用不适用于React Hook

3 个答案: