useEffect 钩子依赖项未更新

Question

我在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"变量。我在这里做错了什么？

我只是希望使用更新的"patientListUrl"再次进行 API 调用。

Answer 1

问题是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)}`);
};

Answer 2

出现此问题的原因是，在调用getDate函数之前，您的状态尚未有机会更新。为了解决这个问题，你可以避免将URL保存到状态，而是在你的效果中构造它。然后，效果的依赖关系将是日期本身，如下所示：

function getDate(d) {
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
}
const Component = props => {
const [d, setD] = useState(new Date());
useEffect(() => {
const patientListUrl = `${baseUrl}api/patient/list?date=${getDate(d)}`;
fetchPatientsStartAsync(patientListUrl);
}, [d]);
const onChange = dt => {
setD(dt);
};
return <DatePicker onChange={onChange} value={d} clearIcon={null}/>
}