获取未捕获的类型错误：无法读取未定义的属性（读取“长度”）

Question

我收到此错误：

这是我的代码：

const Search = () => {
    const [searchBox, setSearchBox] = useState(false)
    const [searchIcon, setSearchIcon] = useState(true)
    const {searchText, setSearchText} = useState('')
    const [searchChanged, setSearchChanged] = useState(false)
    const searchBoxRef = useRef()
    const history = useHistory()

    useEffect(() => {
        document.addEventListener('mousedown', outsideSearchClickListener, false)
        return () => {
            document.removeEventListener('mousedown', outsideSearchClickListener, false)
        }
    }, [])

    useEffect(() => {
        if (searchText.length > 0) {
            history.push({
                pathname: '/search',
                search: `?q=${searchText}`
            })

        } else if (searchChanged && searchText.length === 0) {
            history.replace({ pathname: '/browse' })
        }
    }, [history, searchText, searchChanged])

    const searchClickHandler = () => {
        setSearchBox(true)
    }

    const outsideSearchClickListener = event => {
        if (searchBoxRef.current && !searchBoxRef.current.contains(event.target)) {
            setSearchBox(false)
        }
    }

    const searchTextChangeHandler = event => {
        const textValue = event.target.value
        setSearchText(textValue)
        setSearchChanged(true)
    }

    const clickCrossHandler = () => {
        setSearchText('')
    }
    
    const searchBar = (
        <CSSTransition in={searchBox} classNames="search-animation" timeout={500} unmountOnExit
            onEnter={() => setSearchIcon(false)}
            onExiting={() => setSearchBox(false)}
            onExited={() => setSearchIcon(true)}>
            <div className="Holder">
                <FontAwesomeIcon className="Icon" size="lg" icon={faSearch} />
                <input autoFocus placeholder="Titles, people, genres"
                    onChange={searchTextChangeHandler} value={searchText} />
                {searchText.length > 0 ?
                    <FontAwesomeIcon onClick={clickCrossHandler} size="lg" icon={faTimes} /> : null
                }
            </div>
        </CSSTransition>
    )

    return (
        <div className="SearchBox" onClick={searchClickHandler} ref={searchBoxRef}>
            {searchIcon && <FontAwesomeIcon size="lg" icon={faSearch} />}
            {searchBar}
        </div>
    )
}

我重新检查了我的源代码并将我的源代码与原始代码进行了比较，但仍然没有关于此错误的线索。控制台输出有点不明确。仅供参考：最初的工作是工作，但对我来说不工作

Answer 1

也许像这样更改您的处理程序，以便确保该值始终是字符串

const searchTextChangeHandler = event => {
    const textValue = event.target.value || ""
    setSearchText(textValue)
    setSearchChanged(true)
}