onClickHandler 有时有效，有时无效 - React

Question

下面代码中的onClickHandler，在这个组件中，'SearchResult'，有时可以，有时不可以。

我想不出任何逻辑可以解释为什么它在工作时工作，为什么它不工作，当它不工作时。

我在 onClickHandler 的开头放置了一个调试器，当它不工作时，它根本不会到达调试器 - 这表明有时甚至没有调用该函数，我不知道为什么。

此外，我尝试将函数中的所有代码内联移动到 onClick，但是，它根本不起作用。

此外，我尝试使用函数声明而不是箭头函数，它的行为仍然相同 - 有时有效，有时无效...

This is the site，您可以在搜索框中查看自己的行为。

This is the GitHub repository

Here you can see a video demonstrating how it's not working, except for one time it did work

请帮忙

有问题的组件：

import { useDispatch } from 'react-redux'
import { Col } from 'react-bootstrap'

import { getWeatherRequest } from '../redux/weather/weatherActions'
import { GENERAL_RESET } from '../redux/general/generalConstants'

const SearchResult = ({ Key, LocalizedName, setText }) => {
  const dispatch = useDispatch()

  const onClickHandler = () => {
    dispatch({ type: GENERAL_RESET })
    dispatch(
      getWeatherRequest({
        location: Key,
        cityName: LocalizedName,
      })
    )
    setText('')
  }

  return (
    <Col className='suggestion' onClick={onClickHandler}>
      {LocalizedName}
    </Col>
  )
}

export default SearchResult

这是父组件：

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Form } from 'react-bootstrap'

import { getAutoCompleteResultsRequest } from '../redux/autoComplete/autoCompleteActions'
import { AUTO_COMPLETE_RESET } from '../redux/autoComplete/autoCompleteConstants'
import SearchResult from './SearchResult'

const SearchBox = () => {
  const [text, setText] = useState('')

  const dispatch = useDispatch()

  const autoComplete = useSelector((state) => state.autoComplete)
  const { results } = autoComplete

  const onChangeHandler = (e) => {
    if (e.target.value === '') {
      dispatch({ type: AUTO_COMPLETE_RESET })
      setText('')
    }
    setText(e.target.value)
    dispatch(getAutoCompleteResultsRequest(e.target.value))
  }

  const onBlurHandler = () => {
    setTimeout(() => {
      dispatch({ type: AUTO_COMPLETE_RESET })
      setText('')
    }, 100)
  }

  return (
    <div className='search-box'>
      <Form inline>
        <div className='input-group search-md search-sm'>
          <input
            type='search'
            name='q'
            value={text}
            onChange={onChangeHandler}
            onBlur={onBlurHandler}
            placeholder='Search Location...'
            className='mr-sm-2 ml-sm-3 form-control'
          />
        </div>
      </Form>
      <div className='search-results'>
        {results &&
          results.map((result) => {
            return (
              <SearchResult key={result.Key} {...result} setText={setText} />
            )
          })}
      </div>
    </div>
  )
}

export default SearchBox

Answer 1

我试了一下你的代码，看起来可能的解决方案可能是 SearchResult.js 中的以下添加：

const onClickHandler = (e) => {
    e.preventDefault();
...

经过一些测试

请删除 onBlurHandler。它接缝触发结果的 onClickHandler。

Answer 2

你能把 console.log(e.target.value) 放在 onChangeHandler 里面吗, 再次按搜索结果并确保其中之一不起作用并向我们显示控制台。
在 searchResult 组件中也打印到控制台 LocalizedName

onClickHandler 有时有效，有时无效 - React

onClickHandler sometimes work, sometimes not - React

onclick

reactjs

react-hooks

Here you can see a video demonstrating how it's not working, except for one time it did work

有问题的组件：

这是父组件：