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。

SELECT {products.PK} FROM {Product AS products JOIN CartEntry  AS carts ON {products.PK} = {carts.product} } Where {products.PK} ='<PK of the product>'

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

useEffect挂钩依赖项未更新

2 个答案: