时间戳

首页 > 解决方案 > 如何在处理程序中使用 useEffect 或反之亦然？

javascript - 如何在处理程序中使用 useEffect 或反之亦然？

问题描述

我有一个函数，它是处理程序onChange并获取输入的值，
而且我还有一个函数，用于使用来自该输入的搜索值在数组中搜索，
并呈现一个包含搜索数组作为道具的组件。
但是当我搜索它时我遇到了一个问题，但是在第二个字母之后并且当输入为空时它显示最后一次搜索。
我认为应该使用 useEffect 处理它，但我不知道如何解决或者可能是我错了我需要帮助来纠正，
感谢您的帮助。

这些是我的代码：

获取搜索值部分并作为参数发送：

function BasePage({handleClick, handleSearch }) {
    
    const [searchValue, setSearchValue] = useState('');
    
    useEffect(() => {
        function handleChangeSearchInput(e) {
        const newSearchValue = e.target.value;
        setSearchValue(newSearchValue);
        handleSearch(searchValue);
    }
    })
    
    return (
        <div>
            <fieldset>
        <legend>Search</legend>
        <input 
            value = {searchValue} 
            onChange = {handleChangeSearchInput}
            placeholder = "Enter name to search" 
            type = "text"
            />
                <button onClick={() => handleClick('add-record-form')}>Add</button>
    </fieldset>
            <br />
            {searchValue.length > 0 && <SearchRecord record = {searchValue} />}
        </div>
    );
}

这在父组件中过滤： 

function handleSearch(searchValue) {
       const searchedTerm = contacts.filter(contact => (contact.name.toLowerCase().includes(searchValue.toLowerCase())));
        setSearchTerms(searchedTerm);
    }

我用地图来展示它们。

标签： javascriptarraysreactjs

解决方案

你不应该需要useEffect这个。只需让处理程序处理状态设置和更新。

function handleChangeSearchInput(e) {
  const newSearchValue = e.target.value;
  setSearchValue(newSearchValue);
  handleSearch(newSearchValue);
}

推荐阅读