useState 变量中的 set 方法不更新状态变量

Question

我正在开发一个具有聊天功能的应用程序。当来自新用户的聊天进入时，商店将更新所有聊天的数组，并且该数组将作为道具传递给子组件。每当 chats 数组更新时，子组件都会运行 useEffect 来执行某些功能。我在子组件中有以下代码来检测聊天数组中的更新：

const App = (props: propsData) => {
let [filtered, setFiltered] = useState([])
let [chats, setChats] = useState({active: [], inactive: []})

  useEffect(()=>{  
    const temp: any = {active: [], inactive: []};
    props.payload.conversations.forEach((element: any) => {
        const status = element.status.toLowerCase(); // element.status can be 'Active' or 'Inactive'
        temp[status].push(element);
            
    });
    console.log(temp) // prints expected output: {active: [some array], inactive: [some array]}
    
    setChats(temp); // this doesn't set the value to 'chats'
    
    console.log(chats) // prints {active: [], inactive: []}
    
    filterChats(); // function combines together the 'active' and 'inacive' arrays in 'chats' 
                   // object to assign to 'filtered' array.
  }, [props.payload.conversations.length])

  return(
    <div>
      {
        filtered.map((item: any) => (
          <div>
            //display item data here
          </div>
        )
        )
    </div
  )
}
export default App;

我的问题是 setter 函数 setChats(temp) 没有设置 chats 的值，如果我明确地将其指定为 chats=temp 它有效，但是 setter 方法无效。我试过不提供任何默认值，在提供默认值的同时进行类型转换，但没有任何效果。

Answer 1

setState 是一个异步函数。
所以在设置后立即放置 console.log(state) 很可能会显示以前的值，因为它实际上并没有完成状态更新，直到日志命令为运行.
您可以做的是添加一个具有相关状态的 useEffect 作为依赖项来检查值。

即-

   useEffect(() => {
      console.log(chats);
   }, [chats]);

useState 变量中的 set 方法不更新状态变量

The set method in useState variable not updating the state variable

typescript

reactjs

react-hooks

use-state