V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
qwertty01
V2EX  ›  问与答

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

  •  
  •   qwertty01 · 2020-09-04 23:15:50 +08:00 · 1420 次点击
    这是一个创建于 1566 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    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>
        )
    }
    
    10 条回复    2020-09-05 13:52:40 +08:00
    lemon6
        1
    lemon6  
       2020-09-04 23:28:37 +08:00 via Android   ❤️ 1
    你的两个接口是同时调的,所以在执行删除操作的时候数据库还没有真正完成删除
    qwertty01
        2
    qwertty01  
    OP
       2020-09-04 23:31:40 +08:00
    @lemon6 有什么解决的办法吗?
    qwertty01
        3
    qwertty01  
    OP
       2020-09-04 23:41:54 +08:00
    @lemon6 感谢老哥,一语点醒梦中人。把 updateEvent()放到回调里就可以了。
    iamppz
        4
    iamppz  
       2020-09-04 23:42:09 +08:00 via iPhone
    update 放 then 里面啊
    aaronlam
        5
    aaronlam  
       2020-09-05 00:38:18 +08:00
    感觉是不是用 aysnc await 就不会那么容易出现这种失误了呢。。
    Blacate
        6
    Blacate  
       2020-09-05 02:14:31 +08:00 via iPhone
    推荐 react-query 或 useswr 贼香
    qwertty01
        7
    qwertty01  
    OP
       2020-09-05 09:08:55 +08:00
    @iamppz 嗯,是这样解决的
    qwertty01
        8
    qwertty01  
    OP
       2020-09-05 09:09:53 +08:00
    @Blacate 我这就去学 T - T
    shmilwdc
        9
    shmilwdc  
       2020-09-05 13:23:29 +08:00 via iPhone
    虽然我只懂点前端 但我也知道异步更新操作得放在 promise 的 then 里 😂
    ike
        10
    ike  
       2020-09-05 13:52:40 +08:00
    虽然与问题无关,delete 不能用 get 请求吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2608 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 87ms · UTC 15:40 · PVG 23:40 · LAX 07:40 · JFK 10:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.