Question

class Usurvey extends Component {
constructor(props) {
super(props);
this.nameRef = React.createRef();}
state={
uid:uuid.v1(),
studentName:'',
isSubmitted:false
}
nameSubmit=(e)=>{
let studName=this.nameRef.current.value;
console.log(studName);
this.setState({studentName:studName});
console.log(this.state);
}
render() {
let studentName;

if(this.state.studentName===''&&this.state.isSubmitted===false){
studentName=<div>
<h1>hey student pls let us know your name </h1>
<form onSubmit={this.nameSubmit}>
<input type='text'  placeholder="name pls " ref={this.nameRef} className="namy" />
</form></div>}
return ( 
<div>
{studentName}
 -------------------------------
 {questions}
 </div>
 );
}
}

export default Usurvey;

在这个问题中看到的是，在提交表单时，在namesubmit函数中它应该将state.studentName的值更新为用户给定的输入，然后将其记录在控制台上并且它在上面的代码中不起作用，但是如果我更改namsubmit函数，那么它为什么起作用？请解释这是新代码

nameSubmit=(e)=>{
let studName=this.nameRef.current.value;
console.log(studName);
this.setState({studentName:studName},()=>{
console.log(this.state);
});
}

Answer 1

setState是异步呼叫。通过这样做-

   this.setState({studentName:studName});
   console.log(this.state)

状态确实会在下一个渲染中发生变化，但是您要先记录下它。

使用您的新代码

nameSubmit=(e)=>{
   let studName=this.nameRef.current.value;
   console.log(studName);
   this.setState({studentName:studName},()=>{
   console.log(this.state);
  });
 }

您将日志函数设置为回调，只有在setState完成工作后才能执行

Answer 2

setState是异步工作的，因此不能保证在setState调用之后立即更新组件的状态。在第二段代码中，您将第二个参数作为回调函数提供，该回调函数在状态更新后被调用，因此当您将其登录到控制台时，可以确保状态为最新

Answer 3

setState是异步的，这意味着在下一行执行时状态可能尚未设置。

使用

this.setState({studentName:studName},()=>{
    console.log(this.state);
});

您正在定义一个回调函数，并将其传递给setState

()=> {
    console.log(this.state);
});

setState然后将更改状态，只有完成后（可能在nameSubmit完成后，它会执行您的回调函数，并确保状态是最新的）

Answer 4

我不知道您的编码到底在做什么，但是您的代码中没有定义questions变量。因此，这是完整的代码：

import React from "react";
import { v1 } from "uuid";
export default class App extends React.Component {
  constructor(props) {
  super(props);
  this.nameRef = React.createRef();
}

state = {
  uid: v1(),
  studentName: "",
  isSubmitted: false
};

nameSubmit = e => {
  let studName = this.nameRef.current.value;
  this.setState({ studentName: studName }, () => {
    console.log(this.state);
  });
};

render() {
  let studentName;

  if (this.state.studentName === "" && this.state.isSubmitted === false) {
    return (
      <div>
        <h1>hey student pls let us know your name </h1>
        <form onSubmit={this.nameSubmit}>
          <input type="text"
          placeholder="name pls "
          ref={this.nameRef}
          className="namy"
        />
        <button type="submit">Submit</button>
      </form>
    </div>
   );
  } else {
  return <div>{this.state.studentName}</div>;
  }
 }
}

问题是setState无法正常工作吗？

4 个答案: