Question

我收到警告，因为我的 useEffect 缺少依赖项，但我不想添加这些依赖项，因为每次更改这些依赖项字段的输入值时都会刷新页面。

我的开始日期和结束日期有两个状态数据：

kubectl exec -it curl-pod -n argo -- curl 10.244.1.169:6060/healthz
ok

默认情况下，我根据日期范围加载我的 useEffect 数据：

const [ startDate, setStartDate ] = useState(moment().subtract(3, 'month').format('YYYY-MM-DD'));
const [ endDate, setEndDate ] = useState(moment().format('YYYY-MM-DD'));

然后，我以我的形式使用它们。目标是根据所选日期范围研究数据库中的数据。

useEffect(() => {
    async function fetchData() {
        setDataArr(await myAPI.get({
            propertyID,
            userID,
            startDate,
            endDate,
        }));
    }
    fetchData();
}, [propertyID, userID]);

我收到警告说 useEffect 依赖项数组中缺少 <Form inline> <FormGroup className="mb-10 mr-sm-10 mb-sm-0" inline> <Label for="startDate" className="mr-sm-10">Start Date:</Label> <DatePicker name="startDate" id="startDate" style={{maxWidth: '110px'}} value={startDate} onChange={(e) => setStartDate(e ? moment(e).format('YYYY-MM-DD') : '')} /> </FormGroup> <FormGroup className="mb-10 mr-sm-10 mb-sm-0" inline> <Label for="endDate" className="mr-sm-10">End Date:</Label> <DatePicker name="endDate" id="endDate" style={{maxWidth: '110px'}} value={endDate} onChange={(e) => setEndDate(e ? moment(e).format('YYYY-MM-DD') : '')} /> </FormGroup> <Button className="btn btn-primary" onClick={search}>Update</Button> </Form> 和 startDate，但是如果我添加它们，则每次更改日期输入之一时都会重新加载组件。< /p>

Answer 1

我可能会这样做：

const [ startDate, setStartDate ] = useState(moment().subtract(3, 'month').format('YYYY-MM-DD'));
const [ endDate, setEndDate ] = useState(moment().format('YYYY-MM-DD'));
const [ dateRange, setDateRange ] = useState({startDate, endDate});

<Button
    className="btn btn-primary"
    onClick={() => {
        setDateRange({
            startDate,
            endDate,
        })
    }}
>
    Update
</Button>

useEffect(() => {
    async function fetchData() {
        setDataArr(await myAPI.get({
            propertyID,
            userID,
            ...dateRange
        }));
    }
    fetchData();
}, [propertyID, userID, dateRange]);

现在，您可以在不触发更新的情况下设置 startDate 和 endDate，但是当他们点击搜索时会更新（因为将在更新 fetchData 时触发 dateRange。

React useEffect 缺少依赖项

1 个答案: