setState是否与useState挂钩异步

Question

function App() {
const [name, setName] = useState('');

// *****************
const onNameChange = (e) => {
setName(e.target.value)
console.log(name)   

}
const onSubmit = (e) => {
e.preventDefault();
setName('')
}
return (
<div className="App">
<form onSubmit={onSubmit}>
<input type="text" value={name} onChange={onNameChange} />
<button>submit</button>
</form>
</div>
)
}
export default App;

为什么我不能在控制台中记录完整的名称？例如：如果我填充"；amit"；日志的形式如下：

1. 当键入"；a"；控制台为空白
2. 当类型"时；am"；控制台是"；a">
3. 当类型"时；ami"；控制台是"；am">
4. 当类型"时；amit"；控制台是"；ami">

为什么输出少了一个字符？setName是异步的吗？如果是，那么为什么async/await对它没有任何影响？

注意：类组件中的相同逻辑工作正常。

Answer 1

您正在控制台中记录旧值；添加useEffect到控制台日志新值：

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

相同的逻辑在类组件中不能正常工作(请参阅代码片段(。如果从处理程序调用，控制台日志仍然以旧状态进行响应；您必须在componentDidUpdate中控制台登录以获得新结果。

class App extends React.Component {
state = { name: "" };
// *****************
onNameChange = e => {
this.setState({ name: e.target.value });
console.log("onNameChange:", this.state.name);
};
componentDidUpdate() {
console.log("componentDidUpdate:", this.state.name);
}
onSubmit = e => {
e.preventDefault();
};
render() {
return (
<div className="App">
<form onSubmit={this.onSubmit}>
<input
type="text"
value={this.state.name}
onChange={this.onNameChange}
/>
<button>submit</button>
</form>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

就像扩展React.Component创建的class组件中的setState一样，使用函数中useState钩子提供的更新程序进行状态更新也是异步的，不会立即反映。不能使用await useState()，因为假定它在1渲染期间不变。阅读更多

您可以简单地通过读取render函数中的值(而不是嵌套函数中的(来修复此问题，或者执行类似的操作：

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