onMouseEnter和onMouseLeave同时发生

Question

老师，为什么在nextjs中，下面的onMouseEnter和onMouseLeave一前一后，同时发生。mouseIn改变，导致自组件的list重新从redux获取，重复导致错误。

子组件的代码节选：
function NavSearchInfo() {
const list = useSelector((state) => state.header.list)
const page = useSelector((state) => state.header.page)

const pageList = []

const dispatch = useDispatch()

// console.log(list)

for (let i = (page - 1) * 10; i < page * 10; i++) {
// console.log(list[i])
const item = list[i]
// console.log(i)
// console.log(item)
pageList.push(

{item}

)
}

父亲组件的代码：

import styles from './index.module.scss’
import NavSearchIcon from './nav-search-icon’
import { useState } from 'react’
import { CSSTransition } from 'react-transition-group’
import { useSelector, useDispatch } from 'react-redux’
import {
searchFocus,
searchBlur,
getList,
mouseEnter,
mouseLeave
} from ‘…/…/…/…/store/actions’

import NavSearchInfo from ‘./nav-search-info’

function NavSearch() {
// const [focused, setFocused] = useState(false)
//读取redux header方法
const focused = useSelector((state) => state.header.focused)
const mouseIn = useSelector((state) => state.header.mouseIn)

// focused = false
// mouseIn = false

const dispatch = useDispatch()

//调用redux的dispatch方法
async function handleInputFocus() {
// const data = await get(’/api/headerList’)
// console.log(data)
//获取list
dispatch(searchFocus())
dispatch(getList())

// console.log(focused)

// setFocused(true)

}

function handleInputBlur() {
dispatch(searchBlur())
// console.log(focused)

// setFocused(false)

}

function handleMouseEnter() {
console.log(‘enter’)
dispatch(mouseEnter())
}

function handleMouseLeave() {
console.log(‘leave’)
dispatch(mouseLeave())
}

function getSearchListInfo(focus) {
if (focus) {
return (
<NavSearchInfo
onMouseEnter={handleMouseEnter()}
onMouseLeave={handleMouseLeave()}
/>
)
} else {
return null
}
}

return (

<input
placeholder="搜索"
onFocus={handleInputFocus}
onBlur={handleInputBlur}
className={focused ? styles.navSearchFocused : styles.navSearch}
>

{getSearchListInfo(focused)}

  {/* <NavSearchInfo></NavSearchInfo> */}
</div>

)
}

export default NavSearch

Answer 1

Dell 2021-06-04 20:43:08

同学这是你自己的业务代码吗？我建议自己仔细看下，自组件可以写个判断，把这个报错给屏蔽掉