时间戳

首页 > 解决方案 > useEffect 挂钩依赖项未更新

javascript - useEffect 挂钩依赖项未更新

问题描述

我在 useEffect 挂钩中进行 API 调用，如下所示：

useEffect(() => {
fetchPatientsStartAsync(patientListUrl);
}, [patientListUrl]);

在我的代码中，我还有两个其他状态变量和一个方法，如下所示：

 const [d, setD] = useState(new Date());
 const [patientListUrl, setUrl] = useState(`${baseUrl}api/patient/list?date=${getDate()}`);

 function getDate() {
  return new Date(d.getFullYear(),d.getMonth(),d.getDate())
 }

我正在使用日期选择器库来更新“d”（日期）。每当日期更改时，我都会调用 setUrl 并期待 useEffect 挂钩再次运行。电话是这样的：

    <DatePicker
        onChange={onChange}
        value={d}
        clearIcon={null}
    />
    const onChange = dt => {
     setD(dt);
     setUrl(`${baseUrl}api/patient/list?date=${getDate()}`);
    };

但这并没有更新我的“patientListUrl”变量。在这里做错了什么？

我只是希望 API 调用通过更新的“patientListUrl”再次发生。

标签： javascriptreactjsreact-hooks

解决方案

问题是 setD 是异步函数，因此当您调用 getDate 时，d 不会更新，因此您应该将 dt 传递给 getDate 函数以获取更新的 URL。

function getDate(dt) {
  return new Date(dt.getFullYear(),dt.getMonth(),dt.getDate())
}
const onChange = dt => {
 setD(dt);
 setUrl(`${baseUrl}api/patient/list?date=${getDate(dt)}`);
};

推荐阅读