ReactHook 异步请求删除数据不能正确刷新问题，救救小白吧，被卡了一晚上

[qwertty01]

点击一次删除时，不能刷新，点两次才能删除

export const WorkPage = () => {
    const [items, setItems] = useState([])
    const [update, setUpdate] = useState(false)

    const updateEvent = () => {
        console.log(update)
        setUpdate(!update)
    }

    useEffect(() => {
        axios.get(findAllUrl).then(response => {
            setItems(response.data)
        })
    }, [update])


    const deleteItemHandler = (event) => {
        axios.get(deleteByIdUrl, {
            params: {
                id: event.target.value
            }
        }).then(response => {
            console.log(response)
        })
        updateEvent()
    }
    
    return (
    	<div>
        	<ul>
            	{items.map(((item, index, array) =>
              		<li key={index}>{index + " " + item.content}
               			<button value={item.id}
                			onClick={e => deleteItemHandler(e)}>X
               			</button>
              		</li>
             		))}
            </ul>
        </div>
    )
}

[lemon6]

你的两个接口是同时调的，所以在执行删除操作的时候数据库还没有真正完成删除

[qwertty01]

@lemon6 有什么解决的办法吗？

[qwertty01]

@lemon6 感谢老哥，一语点醒梦中人。把 updateEvent()放到回调里就可以了。

[iamppz]

update 放 then 里面啊

[aaronlam]

感觉是不是用 aysnc await 就不会那么容易出现这种失误了呢。。

[Blacate]

推荐 react-query 或 useswr 贼香

[qwertty01]

@iamppz 嗯，是这样解决的

[qwertty01]

@Blacate 我这就去学 T - T

[shmilwdc]

虽然我只懂点前端 但我也知道异步更新操作得放在 promise 的 then 里 😂

[ike]

虽然与问题无关，delete 不能用 get 请求吧。