useState 函数在功能组件中不起作用

Posted 2023-02-22

【中文标题】useState 函数在功能组件中不起作用

【英文标题】：useState function is not working in functional component

【发布时间】：2021-03-22 15:30:00

【问题描述】：

我想在触发普通函数 (handleConsultantChange) 后使用 useState 函数 (setFilterConsultantId) 更改状态 (filterConsultantId)，并且我希望当我在另一个普通函数中使用该状态时状态值会更改功能（getActiveLeads）。但是状态没有改变。请看下面我的 React 功能组件：

const TabActiveLeads = (
    ...
) => 
    const [filterConsultantId, setFilterConsultantId] = useState('');   
    
    //after this arrow function triggered, 
    const handleConsultantChange = (event) => 
        setFilterConsultantId(event.target.value); //and the filterConsultantId should be changed here
        
        //this getActiveLeads function is called
        getActiveLeads();
    ;
    
    const getActiveLeads = () => 
        
        // but the filterConsultantId here is not changed after it should be changed inside handleConsultantChange function
        console.log(filterConsultantId);
    ; 
;

export default TabActiveLeads;

我不明白，为什么filterConsultantId 在getActiveLeads 函数内部没有改变？以前应该通过在handleConsultantChange 函数中调用setFilterConsultantId 来更改它。

感谢您的帮助..

【问题讨论】：

在这个问题上对你有帮助吗：ysfaran.github.io/blog/post/0002-use-state-with-promise

@SinanYaman 这太复杂了，但感谢您的链接。这是一个很好的参考

【参考方案1】：

setFilterConsultantId 是异步方法，所以在setFilterConsultantId 之后无法获取filterConsultantId 的更新值。 您应该通过添加依赖项 filterConsultantId 将其放入 useEffect。

useEffect(() => 
  console.log(filterConsultantId);
, [filterConsultantId]);

【讨论】：

谢谢！作为一个新手，我仍然对你的答案感到困惑，但在我尝试之后，我可以补充一下：这个 useEffect 应该放在反应功能组件中。在任何正常功能之外。

是的，没错。有关更多详细信息，请参阅文档。 reactjs.org/docs/hooks-effect.html