Reactjs 使用ReactRouter with Router不'；不要用鱼钩工作

似乎我不能在功能组件内部使用React Hook

useState

，该功能组件包装在React路由器的

withRouter

函数调用中

我需要调用

withRouter

从浏览器获取URL参数

功能组件（道具）{
const{id}=props.match.params；
//这将为done和setDone返回null
const{done，setDone}=useState（false）；
//一些使用id的代码
返回
//这里有一些标签
}
使用路由器导出默认值（功能（道具）{
返回
});

添加带有路由器的

似乎会停止钩子的工作

我该怎么做

我试图在函数调用中添加钩子，但没有成功：

使用路由器导出默认值（功能（道具）{
const{done，setDone}=useState（false）；
返回
});

---

我想我需要了解的主要问题是hook的局限性是什么？似乎它们不能在

withRouter

HOC函数中声明。对吗？当我需要使用URL参数时，我需要使用

with router

函数来解决这个问题。

您忘了向组件添加参数：

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>
}

功能组件（道具）{
const{id}=props.match.params；
//这将为done和setDone返回null
const{done，setDone}=useState（false）；
//一些使用id的代码
返回
//这里有一些标签
}

您忘记向组件添加参数：

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>
}

功能组件（道具）{
const{id}=props.match.params；
//这将为done和setDone返回null
const{done，setDone}=useState（false）；
//一些使用id的代码
返回
//这里有一些标签
}

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

从useState：

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

当我们用useState声明一个状态变量时，它返回一对- 包含两个项目的数组。第一项是当前值，而 第二个是让我们更新它的函数。使用[0]和 访问它们有点混乱，因为它们有特定的含义。 这就是为什么我们改用数组分解

---

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

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

从useState：

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

当我们用useState声明一个状态变量时，它返回一对- 包含两个项目的数组。第一项是当前值，而 第二个是让我们更新它的函数。使用[0]和 访问它们有点混乱，因为它们有特定的含义。 这就是为什么我们改用数组分解

---

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

代码的主要问题是您没有在组件的构造函数中获得props，但是如果它违反了钩子的规则，您可以使用另一种方法

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

const TheComponent=（匹配）=>{
//如果需要，您可以在参数上直接从道具进行销毁
const{id}=match.params；
const[done，setDone]=useState（false）；
返回
//这里有一些标签
}
导出常量包装器组件=withRouter（（道具）=>{
//如果需要，您可以在参数上直接从道具进行销毁
常量{match}=props；
返回
});

代码的主要问题是您没有在组件的构造函数中获得道具，但如果它违反了挂钩规则，您可以使用另一种方法

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

const TheComponent=（匹配）=>{
//如果需要，您可以在参数上直接从道具进行销毁
const{id}=match.params；
const[done，setDone]=useState（false）；
返回
//这里有一些标签
}
导出常量包装器组件=withRouter（（道具）=>{
//如果需要，您可以在参数上直接从道具进行销毁
常量{match}=props；
返回
});

没有发送

道具

是我问题中的输入错误。感谢您指出out.NP，我实际上检查了问题是元组与对象破坏，这真是一个让人捉摸不透的把戏，很高兴您修复了它。不发送

道具

是我问题中的输入错误。谢谢你指出。NP，我实际上检查了这个问题是元组和对象破坏，这真的是一个技巧，很高兴你把它修好了。Eish！事实上，这就是问题所在。最后没什么要做的。是的！事实上，这就是问题所在。最后没有什么要做的。