当依赖项发生变化时，ReactJS 在 UseEffect 上遇到 setState 问题答案

【问题标题】：ReactJS Having trouble setState on UseEffect when dependencies change当依赖项发生变化时，ReactJS 在 UseEffect 上遇到 setState 问题
【发布时间】：2021-03-29 00:20:44
【问题描述】：

当用户同时输入时间和回合时，我正在尝试在 dispatchMeasureInput.point2D.speed 上设置状态。当我更改时间或舍入值时，如果不是“持有”一个键，它就可以正常工作，但是当我在上按住退格键或任何其他键时，它会导致无限循环。有谁知道如何解决这个问题？

const [dischargeMeasureInput, setDischargeMeasureInput] = useState({
        discOperatId: null, discMeasureId: null,
        orderNo: '1', depthPoint: '3', depth: null, distant: null,
        point2D: { surfaceD: null, time: null, round: null, speed: null }
})    

useEffect(() => {
        if (dischargeMeasureInput.point2D.time && dischargeMeasureInput.point2D.round) {
               axios()...
                .then(res => {
                    if (res.data) {
                        setDischargeMeasureInput({ ...dischargeMeasureInput, point2D: { ...dischargeMeasureInput.point2D, speed: res.data.velocityPoint1 } })
                    }
                    else {
                        setDischargeMeasureInput({ ...dischargeMeasureInput, point2D: { ...dischargeMeasureInput.point2D, speed: null } })
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        }

}, [dischargeMeasureInput.point2D.time, dischargeMeasureInput.point2D.round])

//child Component
<Input value={props.dischargeMeasureInput.point2D.time}
       onChange={(e) => props.setDischargeMeasureInput({ ...props.dischargeMeasureInput, point2D: { ...props.dischargeMeasureInput.point2D, time: e.target.value } })}/>
                
<Input value={props.dischargeMeasureInput.point2D.round}
       onChange={(e) => props.setDischargeMeasureInput({ ...props.dischargeMeasureInput, point2D: { ...props.dischargeMeasureInput.point2D, round: e.target.value } })} />
                
<Input value={props.dischargeMeasureInput.point2D.speed}
       onChange={(e) => props.setDischargeMeasureInput({ ...props.dischargeMeasureInput, point2D: { ...props.dischargeMeasureInput.point2D, speed: e.target.value } })} />

这是一个简短的 .gif 文件

【问题讨论】：

标签： reactjs react-hooks use-effect

【解决方案1】：

好的，我想通了，似乎存在竞争条件。我只需要在 setState 之前添加 bool 标志。这个链接帮助我 https://medium.com/hackernoon/avoiding-race-conditions-when-fetching-data-with-react-hooks-220d6fd0f663

useEffect(() => {
    let canceled = false
    
    if(!canceled)
     setDischargeMeasureInput({ ...dischargeMeasureInput, point2D: { ...dischargeMeasureInput.point2D, speed: res.data.velocityPoint1 } })
    }
    
    //and cleanup function
    return () => (canceled = true)
})

【讨论】：