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() 参数更改时，再次重新运行效果/id：将 id 添加到您的依赖项数组：

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

Answer 2

这是经典的陷阱。您可以像这样触发 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 导致这种混乱。

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

2 个答案: