Question

如何在 useEffect 中使用 useParams？

2023-01-15

927

javascript reactjs react-router react-router-dom

我想在 useEffect 中使用 useParams ，但出现错误“未捕获 TypeError：无法读取未定义的属性（读取‘params’）”。

app.js

<Route>
  <Route path="/product/:id" element={<ProductDetails />} />
</Route>

ProductDetails.js

const dispatch = useDispatch();
const { id } = useParams();

  useEffect(() => {
    dispatch(getProductDetails(match.params.id));
  }, [dispatch, match.params.id]);`

正如我上面提到的，它给出了错误。

Answer 1

看起来您已经将部分代码/逻辑从 react-router@5 （其中有一个 match 属性注入到组件）转换为 react-router@6 （其中您改用 useParams 钩子）。 match 只是未定义，因此在尝试访问其中的 params 属性时会引发错误。

useParams 钩子完全取代了 props.match.params 。现在，单独的 id 路由路径参数就是依赖项。

const dispatch = useDispatch();
const { id } = useParams();

useEffect(() => {
  dispatch(getProductDetails(id));
}, [dispatch, id]);

Answer 2

我不认为你想在 useEffect 函数内部使用钩子。回答你的问题

你可以试试这个

useEffect(() => {
    dispatch(getProductDetails(match?.params?.id));
  }, [dispatch, match?.params?.id]);`

但你使用的是 javascript 而不是 typescript，所以你可以试试这个。

const param = match && match.params ? match.params.id : ''

useEffect(() => {
  if (param) {
    dispatch(getProductDetails(param));
  }
}, [dispatch, param]);