无法弄清楚为什么没有在更改时调用 useState答案

【问题标题】：Unable to figure out why useState is not being called on chage无法弄清楚为什么没有在更改时调用 useState
【发布时间】：2021-07-12 11:59:38
【问题描述】：

我正在尝试从搜索栏设置搜索品牌，然后从该组件中传递的道具中找到它，为此我想到了使用 useState，它在更改 searbrand 时不会被调用。而且，为什么当我尝试在 onChange 或 onClick 上设置状态时，它永远不会立即改变。它是如何工作的？？

 const [searchBrand, setSearchBrand] = useState('');
    const [searchBrandHolder, setSearchBrandHolder] = useState('');
    const [searching, setSearching] = useState(false)

    const brandSearchHandler = (e) => {
        
    }

    useState (() => {
        if (searchBrandHolder === "") {
            setSearching(false);
        }
        setSearching(true);
        console.log("searching state = "+searching);
        console.log("brand name searching = "+searchBrand);
    }, [searchBrand])

    console.log("brand to find = "+searchBrand);

    return (
        <div>
            <div className="searchByBrand">
                <input type="text" onChange={e => setSearchBrandHolder(e.target.value)}  placeholder="Search by brand"></input>
                <SearchIcon className="searchIcon" onClick={e => {setSearchBrand(searchBrandHolder); brandSearchHandler()}} />

【问题讨论】：

我相信您正在尝试使用 useEffect 钩子。我还建议您尽早返回或在 useEffect 挂钩函数中使用 else，否则您将始终将搜索设置为 true。
我也无法理解为什么 setState 值在设置后没有立即更新，为什么过了一会儿。 useEffect (() => { if (searchBrandHolder === "") { setSearching(false); console.log("state set to "+searching); } else { setSearching(true); console.log("searching state = "+searching); console.log("brand name searching = "+searchBrand); } }, [searchBrand]) console.log("searching state = "+searching); 在 setSate(true) 之后的 else 部分，日志有旧值(false)，但在函数之外，它已更新。

标签： reactjs onclick react-hooks onchange use-state

【解决方案1】：

你需要的是useEffectreadmore。以下是代码的结构：

 useEffect (() => {
    if (searchBrandHolder === "") {
        setSearching(false);
    }
    setSearching(true);
    console.log("searching state = "+searching);
    console.log("brand name searching = "+searchBrand);
}, [searchBrandHolder])

【讨论】：