Javascript React useState和setState行为错误_Javascript_Reactjs_React Hooks

Javascript React useState和setState行为错误

javascript reactjs

Javascript React useState和setState行为错误,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我一直在测试状态的变化，以便能够依赖于它们并计算其他状态，但我有几个结果取决于实现，特别是有一个结果我不知道或不知道发生了什么，也不知道它为什么会产生这样的结果，请注意console.log（）案例：1 const [state, setState] = useState({count: 0}); const handleCount = () => { console.log(state); // prints {count: 0} setState(prevState

我一直在测试状态的变化，以便能够依赖于它们并计算其他状态，但我有几个结果取决于实现，特别是有一个结果我不知道或不知道发生了什么，也不知道它为什么会产生这样的结果，请注意console.log（）

案例：1

const [state, setState] = useState({count: 0});

const handleCount = () => {
    console.log(state); // prints {count: 0}
    setState(prevState => {
      prevState.count = prevState.count + 1;
      return prevState;
    });
    console.log(state); // prints {count: 1}
  }

useEffect(() => {
    console.log('has changed.. ' + state.count)
  }, [state]); // in this case this doesn't show any changes, so isn't renders anything, I need to render this value

// in render
<Button onClick={() => handleCount()}>
   Click {state.count}
</Button>

案例：3

const [state, setState] = useState(0);
const handleCount = () => {
  console.log(state); // prints 0
  setState(state => state + 1);
  console.log(state); // prints 0 it supposed to be 1!
}

我读过书，但一点也不工作

因此，我需要帮助来了解发生了什么请…

实际上，您正在修改prevState参数，这会给您错误的结果，请尝试以下操作：

setState（prevState=>{
常量计数=prevState.count+1
返回{…prevState，count}
})

试试这个：


常量handleCount=（）=>{
console.log（状态）；
setState（{…状态，计数：（state.count+1）}）；
console.log（状态）；
}

Functional

setState

没有回调函数选项（在类组件中可用），因为它有

useffect

。尝试此操作并检查控制台日志：

const handleCount = () => {
  console.log('initial state', state) // prints {count: 0}
  setState((prevState) => ({ ...prevState, count: prevState.count + 1 }))
  console.log(
    'state after Calling Async seState might not print latest state',
    state
  ) // prints {count: 0}
}


useEffect(() => {
  console.debug('state changed', state)
  // first print: { count: 0 } at mount
  // second print: { count: 1 }
}, [state])

您混淆了功能组件和类组件之间的状态。明确的概念是功能组件没有任何状态，但它有

useState

挂钩。例如：

const [state, setState] = useState({count: 0});

虽然您对

userState

使用了state，但这里state只是一个变量。您可以像下面这样使用：

const [counter, setCounter] = useState({count: 0});

另一方面，对于类组件，必须使用如下状态

constructor(props){
   super(props);
   this.state = {count: 0}
}

您可以在其中设置state对象，如

this.setState(prevState => {
    return {count: prevState.count+1}
});

请为功能组件和类组件提供以下两个示例

import React, {useEffect, useState} from "react"; export default function Example() { const [state, setState] = useState({count: 0}); const handleCount = () => { console.log(state); // prints {count: 0} setState({count: state.count+1}); console.log(state); // prints {count: 1} }; useEffect(() => { console.log('has changed.. ' + state.count) }, [state]); return ( <div> <button onClick={() => handleCount()}> Click {state.count} </button> </div> ); }

import React from "react"; export default class Example extends React.Component{ constructor(props){ super(props); this.state = {count: 0} } handleCount = () => { console.log(this.state); // prints {count: 0} this.setState(prevState => { return {count: prevState.count+1} }); console.log(this.state); // prints {count: 1} }; render() { return ( <div> <button onClick={() => this.handleCount()}> Click {this.state.count} </button> </div> ); } }
功能组件

import React, {useEffect, useState} from "react"; export default function Example() { const [state, setState] = useState({count: 0}); const handleCount = () => { console.log(state); // prints {count: 0} setState({count: state.count+1}); console.log(state); // prints {count: 1} }; useEffect(() => { console.log('has changed.. ' + state.count) }, [state]); return ( <div> <button onClick={() => handleCount()}> Click {state.count} </button> </div> ); }

import React from "react"; export default class Example extends React.Component{ constructor(props){ super(props); this.state = {count: 0} } handleCount = () => { console.log(this.state); // prints {count: 0} this.setState(prevState => { return {count: prevState.count+1} }); console.log(this.state); // prints {count: 1} }; render() { return ( <div> <button onClick={() => this.handleCount()}> Click {this.state.count} </button> </div> ); } }

import React，{useffect，useState}来自“React”；导出默认函数示例（）{ const[state，setState]=useState（{count:0}）；常量handleCount=（）=>{ console.log（state）；//打印{count:0} setState（{count:state.count+1}）； console.log（state）；//打印{count:1} }; useffect（（）=>{ console.log（'已更改..'+state.count） }，[州]；返回( handleCount（）}> 单击{state.count} ); }
类组件

import React, {useEffect, useState} from "react"; export default function Example() { const [state, setState] = useState({count: 0}); const handleCount = () => { console.log(state); // prints {count: 0} setState({count: state.count+1}); console.log(state); // prints {count: 1} }; useEffect(() => { console.log('has changed.. ' + state.count) }, [state]); return ( <div> <button onClick={() => handleCount()}> Click {state.count} </button> </div> ); }

import React from "react"; export default class Example extends React.Component{ constructor(props){ super(props); this.state = {count: 0} } handleCount = () => { console.log(this.state); // prints {count: 0} this.setState(prevState => { return {count: prevState.count+1} }); console.log(this.state); // prints {count: 1} }; render() { return ( <div> <button onClick={() => this.handleCount()}> Click {this.state.count} </button> </div> ); } }

从“React”导入React；导出默认类示例扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={count:0} } handleCount=（）=>{ console.log（this.state）；//打印{count:0} this.setState（prevState=>{ 返回{count:prevState.count+1} }); console.log（this.state）；//打印{count:1} }; render（）{ 返回( this.handleCount（）}> 单击{this.state.count} ); } }
React使用
Object.is
在您的案例中比较state对象
{count:0}
。在第一种情况下，您只是改变属性计数并返回相同的对象。这就是react认为状态没有改变的原因。请尝试下面的代码片段

constmyobj={count:0}； myObj.count=3； console.log（Object.is（myObj，myObj））；//返回true
这是否回答了您的问题？