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

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

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}/>
}