reactjs 如何在url中id改变时重新呈现函数组件

v64noz0r 于 2023-05-28 发布在 React

关注(0)|答案(2)|浏览(115)

我有一个React组件，它从IndexedDB获取一些数据，这是一个异步任务，它使用useParams钩子传入的url中的id，假设id = 1。当我单击示例中的链接时，id变为2，但此时什么也没有发生，组件没有重新呈现。
我需要做些什么才能让它工作？我只是不明白为什么它现在不工作。有人能给我点启发吗？

import React, {useState} from 'react';
import { Link, useParams } from "react-router-dom";
import { useAsync } from 'react-async';

export default function (props) {
  let { id } = useParams();

  const { data, error, isLoading } = useAsync({
    promiseFn: loadData,
    id: parseInt(id)
  });

  if (isLoading) return "Loading...";
  if (error) return `Something went wrong: ${error.message}`;
  if (data)
    return (
      <>
        <h1>{data.name}</h1>
        <Link to={'/2'}>other id</Link>
      </>
     );
}

reactjs

来源：https://stackoverflow.com/questions/61409489/how-to-rerender-function-component-when-id-changed-in-url

2条答案

按热度按时间

3pvhb19x1#

异步函数应该在useEffect钩子内部调用。当id发生变化时，useEffect将始终被调用。

import React, { useState } from "react";
import { Link, useParams } from "react-router-dom";
import { useAsync } from "react-async";

export default function(props) {
  let { id } = useParams();

  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState(null);

  useEffect(() => {
    const { data, error, isLoading } = useAsync({
      promiseFn: loadData,
      id: parseInt(id)
    });
    setIsLoading(isLoading);
    setError(error);
    setData(data)
  }, [id]);

  if (isLoading) return "Loading...";
  if (error) return `Something went wrong: ${error.message}`;
  if (data)
    return (
      <>
        <h1>{data.name}</h1>
        <Link to={"/2"}>other id</Link>
      </>
    );
}

赞(0）回复(0）举报 2023-05-28

lymnna712#

当使用react-async库中的useAsync钩子时，您可以使用watch或watchFn选项来监视更改。因此，更改以下行：

const {data, error, isLoading} = useAsync({ promiseFn: loadData, id: parseInt(id)});

致：

const {data, error, isLoading} = useAsync({ promiseFn: loadData, id: parseInt(id), watch: id});

成功了

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 如何在url中id改变时重新呈现函数组件

2条答案

相关问题

热门标签

最新问答