為什么我的反應鈎子 state 只在兩次點擊后更新

Question

import React, { useState, useEffect } from 'react'
import './mobileNavBar.scss'
import { div } from 'react-router-dom'
import URL from '../../constant/urls'
import { openMobileMenu } from 'component/sideMenu/action/sideMenuAction'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import classnames from 'classnames'

const MobileNavBar = () => {
    const [state, setState] = useState({
        home: true,
        cat: false,
        checkout: false,
    })
    useEffect(() => {
        detectLink()
    }, [])
    const detectLink = () => {
        const path = window.location.pathname
        if (path == '/') {
            setState((current) => ({
                ...current,
                home: true,
                cat: false,
                checkout: false,
            }))
            return
        }
        if (path.includes('cat')) {
            setState((current) => ({
                ...current,
                home: false,
                cat: true,
                checkout: false,
            }))
            return
        }
        if (path.includes('checkout')) {
            setState((current) => ({
                ...current,
                home: false,
                cat: false,
                checkout: true,
            }))
            return
        }
    }
    const handleClick = () => {
        detectLink()
    }
    const homecss = classnames({ active: state.home })
    const catcss = classnames({ active: state.cat })
    const checkoutcss = classnames({ active: state.checkout })
    return (
        <div className="mobileNav">
            <Link to='/' onClick={handleClick} className={'item ' + homecss}></Link>
            <Link to='/cat' onClick={handleClick} className={'item ' + catcss}></Link>
            <Link to='/checkout' onClick={handleClick} className={'item ' + checkoutcss}></Link>
        </div>
    )
}

我有一個像這樣的菜單。 我想當我點擊菜單項時，css class active將分配給該項目。

問題是，單擊不會發生這種情況，我需要雙擊。 state 似乎滯后，它似乎只在我觸發下一個動作時更新。

Answer 1

我的猜測是window.location.pathname在渲染之前沒有更新。 但是這段代碼有很多錯誤。 您的 useEffect 有很多您沒有聲明的依賴項。

我要做的是將 detectLink 移動到效果內部，並在window.location.pathname發生更改時運行它。 然后更改您的 onClick 以處理路由（無論該代碼在哪里，因為它不在此示例中）

預計到達時間：

useEffect(() => {

    const detectLink = () => {
        const path = window.location.pathname
        if (path == '/') {
            setState((current) => ({
                ...current,
                home: true,
                cat: false,
                checkout: false,
            }))
            return
        }
        if (path.includes('cat')) {
            setState((current) => ({
                ...current,
                home: false,
                cat: true,
                checkout: false,
            }))
            return
        }
        if (path.includes('checkout')) {
            setState((current) => ({
                ...current,
                home: false,
                cat: false,
                checkout: true,
            }))
            return
        }
    }

    detectLink()
}, [window.location.pathname])

然后刪除您的點擊處理程序，因為自從您使用鏈接以來，只要位置發生變化，它就會運行

Answer 2

您的問題是您正在偵聽pathname的更改，單擊Link后不會立即更新。 用withRouter包裹你的組件並監聽location.pathname的變化

import { withRouter } from 'react-router-dom'
export const NavMenu = withRouter(({ location, history, match }) =>{
    useEffect(() => detectLink(), [location])
})

在detectLink里面

const detectLink = () => {
    const path = location.pathname
    if (path == '/') {
        setState((current) => ({
            ...current,
            home: true,
            cat: false,
            checkout: false,
        }))
        return
    }
    if (path.includes('cat')) {
        setState((current) => ({
            ...current,
            home: false,
            cat: true,
            checkout: false,
        }))
        return
    }
    if (path.includes('checkout')) {
        setState((current) => ({
            ...current,
            home: false,
            cat: false,
            checkout: true,
        }))
        return
    }
}