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

2020-09-04 23:15:50 +08:00

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

1268 次点击

所在节点

问与答

10 条回复

lemon6

2020-09-04 23:28:37 +08:00

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

qwertty01

2020-09-04 23:31:40 +08:00

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

qwertty01

2020-09-04 23:41:54 +08:00

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

iamppz

2020-09-04 23:42:09 +08:00

update 放 then 里面啊

aaronlam

2020-09-05 00:38:18 +08:00

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

Blacate

2020-09-05 02:14:31 +08:00