React useEffect 不会在链接到路由更改时触发

Question

我在一个名为 AllJobs 的组件中有以下代码

                            <TableCell>
                                    <Link
                                        to={`/job/${item.id}`}
                                        style={{ textDecoration: 'underline', color: 'black' }}
                                    >             
                                     {item.id}
                                    </Link>
                            </TableCell>

当用户点击此链接时，它会在我的 App.js 文件中按照以下路由调用组件 JobDetails：

<Router>
  <Switch>
    <Route exact path="/job/:id">
      <JobDetails />
    </Route>
  </Switch>
</Router>

我的问题是，在我的 JobDetails 组件中，我有一个未触发的 useEffect 并且不确定为什么它不是我需要它来调用我的 getJob() 函数？

export default function JobDetails() {

const { id } = useParams();

const [currentJob, setCurrentJob] = useState([]);

const getJob = async () => {
    console.log("Inside JobDetails for id:", id)
    try {
      const response = await fetch(`http://localhost:3000/get-job/${id}`);
      const currentJobRec = await response.json();
      console.log("current-job", currentJobRec)
          
      setCurrentJob(currentJobRec);
    } catch (err) {
      console.error(err.message);
    }
  }; 

  useEffect(() => {
    getJob();
  }, []);  

由于我需要触发 useEffect()，任何人都可以帮助我解决我所缺少的内容。

Answer 1

这是经典的陷阱。您可以像这样触发getJob：

// IIFE
useEffect(() => {
    (async () => await getJob())();
}, []); 

现在说说为什么异步调用在 useEffect 中不起作用？

首先，让我们看看 React 文档中的 useEffect。

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

注意，这会返回一个函数（清理函数）。该函数在组件卸载时执行（如果依赖数组为空）。

现在回到你的例子

useEffect(() => {
    getJob();
}, []);

getJob 被定义为async 函数，因此必然返回Promise。因此，不是清理，而是返回 Promise 导致这个混乱。

Answer 2

看来您设置路线和链接的方式非常正确。老实说，我并不完全确定确切的问题是什么，但我建议这样做：

每当id 参数更改时再次重新运行效果/getJob()：将id 添加到您的依赖关系数组中：

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