Question

我正在尝试访问在App.js上设置的句柄ID，如下所示：

          <Router>
            <Switch>
              <Route exact path='/users/:handle' component={User}/>
            </Switch>
           </Router>

我想在我的用户组件中访问它，但收到错误“无法读取未定义的属性'match'”。如何访问功能组件中的匹配参数？

const User = (props) => {

useEffect(() => {
  getProfile();
})

const getProfile = (props) => {
    const { handle } = props.match.params.handle;
    const { postId } = props.match.params.postId;

    if (postId) setPostIdParam(postId);

    props.getUserData(handle);
    axios.get(`/user/${handle}`)
      .then((res) => {
        setProfile(res.data.user);
      })
      .catch((err) => console.log(err));
}

Answer 1

将props传递给定义的函数。函数getProfile具有一个名为props的局部变量。

const User = (props) => {

  useEffect(() => {
    getProfile(props); // <-- pass the component props
  })

  const getProfile = (props) => { // <-- function takes props object!!
    const { handle, postId } = props.match.params;

    if (postId) setPostIdParam(postId);

    props.getUserData(handle);
    axios.get(`/user/${handle}`)
      .then((res) => {
        setProfile(res.data.user);
      })
      .catch((err) => console.log(err));
}

或者，从函数签名中删除props，而在功能组件范围中使用定义的那个。

const User = (props) => {

  useEffect(() => {
    getProfile();
  })

  const getProfile = () => {
    const { handle, postId } = props.match.params; // <-- component props object!!
    
    if (postId) setPostIdParam(postId);

    props.getUserData(handle);
    axios.get(`/user/${handle}`)
      .then((res) => {
        setProfile(res.data.user);
      })
      .catch((err) => console.log(err));
}

除非您的道具中确实有handle嵌套在props.match.params.handle中并且与postId相同，我想您还是要这么做

const handle = props.match.params.handle;
const postId = props.match.params.postId;

或者更好地使用对象解构

const { handle, postId } = props.match.params;

Answer 2

这就是我要这样做的方式，我注意到您对params进行销毁的方式有误

const User = (props) => {
  const { handle, postId } = props.match.params;

  useEffect(() => {
    getProfile();
  });

  const getProfile = (props) => {
    if (postId) setPostIdParam(postId);

    props.getUserData(handle);
    axios.get(`/user/${handle}`)
      .then((res) => {
        setProfile(res.data.user);
      })
      .catch((err) => console.log(err));
  }

如何在功能组件中访问props.match.params

2 个答案: