我一直在测试状态的变化，以便能够依赖它们并计算其他状态，但是根据实现，我有几个结果，特别是我不知道或不知道发生了什么或为什么它会给出该结果，请注意控制台.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>
案例： 2
const handleCount = () => {
console.log(state); // prints {count: 0}
setStateV(prevState => ({...prevState, count: prevState.count + 1}));
console.log(state); // prints {count: 0}
}
useEffect(() => {
console.log('has changed.. ' + state.count)
}, [state]); // it show that changed, but I cant depend on this because it haven't changed when I needed it
案例： 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!
}
我已经读过这个但根本没有工作
所以，我需要帮助来了解发生了什么...
React 使用Object.is来比较状态对象{count: 0}。在第一种情况下，您只是改变属性计数并返回相同的对象。这就是为什么 react 认为状态没有改变。试试下面的片段
const myObj = { count: 0};
myObj.count = 3;
console.log(Object.is(myObj, myObj)); // returns true但是如果你想在useState()中使用一个对象，当你对状态进行更新时，你应该总是返回一个带有Object.assign的新对象，或者只是简单地解构像这样的prevState对象。
const handleCount = () => {
setState(prevState => {
// if using Object.assign
// return Object.assign(prevState, {count: prevState.count + 1})
return {...prevState, count: prevState.count + 1}
});
}
或者对于一个简单的计数变量，你可以只使用
const [count, setCount] = useState(0);
const handleCount = () => {
setCount(prevCount => (prevCount + 1))
}
函数setState没有回调函数选项(在 this.setState of class component 中可用(，因为它有useEffect.试试这个并检查控制台日志：
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])
实际上，您正在更改 prevState 参数，这会给您带来错误的结果，请尝试以下操作：
setState(prevState => {
const count = prevState.count + 1
return { ...prevState, count }
})
试试这个：
const handleCount = () => {
console.log(state);
setState({...state, count: (state.count + 1)});
console.log(state);
}
您在功能组件和类组件之间混淆了状态。明确的概念是功能组件没有任何状态，但它有useState钩子。例如：
const [state, setState] = useState({count: 0});
虽然你用状态来表示userState但这里的状态只是一个变量。你可以像下面这样使用：
const [counter, setCounter] = useState({count: 0});
另一方面，对于类组件，您必须使用类似于
constructor(props){
super(props);
this.state = {count: 0}
}
在哪里可以设置状态对象，例如
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>
);
}
}