Reactjs 反应效果缺少依赖项

我收到一个警告，因为我的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]);

然后，我在表格中使用它们。目标是根据选定的日期范围研究数据库中的数据

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

开始日期：
设置开始日期（e？时刻（e）.格式（'YYYY-MM-DD'）：''）
/>
结束日期：
setEndDate（e？力矩（e）.格式（'YYYY-MM-DD'）：''）
/>
更新

我收到的警告是，useEffect依赖项数组中缺少

startDate

和

endDate

，但是如果我添加它们，每次更改一个日期输入时，组件都会重新加载。

我可能会：

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]);

const[startDate，setStartDate]=useState（矩（）.subtract（3，'月'）.format（'YYYY-MM-DD'）；
const[endDate，setEndDate]=useState（矩（）格式（'YYYY-MM-DD'）；
const[dateRange，setDateRange]=useState（{startDate，endDate}）；
{
设置日期范围({
开始日期，
结束日期，
})
}}
>
更新
useffect（（）=>{
异步函数fetchData（）{
setDataArr（等待myAPI.get({
财产ID，
用户ID，
…日期范围
}));
}
fetchData（）；
}，[propertyID，userID，dateRange]）；

现在，您可以在不触发更新的情况下设置

startDate

和

endDate

，但当他们单击搜索时，它会更新（因为当它更新

dateRange

时，这将触发

fetchData

，我可能会：

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]);

const[startDate，setStartDate]=useState（矩（）.subtract（3，'月'）.format（'YYYY-MM-DD'）；
const[endDate，setEndDate]=useState（矩（）格式（'YYYY-MM-DD'）；
const[dateRange，setDateRange]=useState（{startDate，endDate}）；
{
设置日期范围({
开始日期，
结束日期，
})
}}
>
更新
useffect（（）=>{
异步函数fetchData（）{
setDataArr（等待myAPI.get({
财产ID，
用户ID，
…日期范围
}));
}
fetchData（）；
}，[propertyID，userID，dateRange]）；

---

现在，您可以在不触发更新的情况下设置

startDate

和

endDate

，但当他们单击搜索时，它会更新（因为这将在更新

dateRange

时触发

fetchData

非常智能的解决方案。谢谢。如果您只想在用户点击提交时提取数据，那么您可以删除useEffect，只需在onClick内调用fetch。不确定这是否是您的用例。非常智能的解决方案。谢谢。如果您只想在当用户点击submit时，您可以删除useEffect，只需在onClick中调用fetch，但不确定这是否是您的用例。