奇怪的行为:我希望第一个和第二个控制台。log显示出不同的结果,但是它们显示相同的结果,并且仅在下一次单击时更改了值。我应该如何编辑代码以使值不同?
function App() {
const [count, setCount] = React.useState(false);
const test = () => {
console.log(count); //false
setCount(!count);
console.log(count); //false
};
return (
<div className="App">
<h1 onClick={test}>Hello StackOverflow</h1>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
您可以在这里看到一个工作示例:https://codesandbox.io/s/wz9y5lqyzk
状态更新是异步的,因此,如果您使用的挂钩可以使用useEffect
在更新后通知。
这是一个示例:
https://codesandbox.io/s/wxy342m6l
如果您使用的是React组件的SetState,则可以使用回调
this.setState((state) => ({count: !state.count}), () => console.log('Updated', this.state.count));
如果需要状态值,请记住使用回调来更新状态。
状态更新是异步的。您从useState
获得的setCount
功能无法神奇地伸出来并更改count
常数的值。一方面,这是一个常数。另一方面,setCount
无法访问它。相反,当您调用setCount
时,您的组件函数将再次被调用,useState
将返回更新的计数。
实时示例:
const {useState} = React;
function Example() {
const [count, setCount] = useState(false);
const test = () =>{
setCount(!count); // Schedules asynchronous call to Example, re-rendering the component
};
return (
<div className="App">
<h1 onClick={test}>Hello CodeSandbox</h1>
<div>Count: {String(count)}</div>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
如果您需要在count
更改时执行一些副作用,请使用useEffect
:
useEffect(() => {
console.log(`count changed to ${count}`);
}, [count]);
请注意,我们告诉useEffect
仅在count
发生更改时仅致电我们的回调,因此,如果我们有其他状态,我们的回调不会不必要地运行。
实时示例:
const {useState, useEffect} = React;
function Example() {
const [count, setCount] = useState(false);
const test = () =>{
setCount(!count); // Schedules asynchronous call to Example, re-rendering the component
};
useEffect(() => {
console.log(`count changed to ${count}`);
}, [count]);
return (
<div className="App">
<h1 onClick={test}>Hello CodeSandbox</h1>
<div>Count: {String(count)}</div>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
setState
Hook不会直接更新组件中的值。它更新了它的内部状态,导致组件的启用者,然后返回新状态值,您将其分配给count
。
当您在test
内console.log(count)
时,您会显示count
的当前值,即旧值(更新之前(。如果您将console.log()
移至渲染中,您会看到新值:
const { useState } = React;
const Component = () => {
const [count, setCount] = useState(false);
const test = () => {
console.log('before: ', count);
setCount(!count)
}
console.log('after: ', count);
return (
<div className="App">
<button onClick={test}>Click</button>
</div>
);
}
ReactDOM.render(
<Component />,
demo
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>