React State Hook - 我无法设置状态

Question

我正在尝试实现 Facebook 登录到我的 React 应用程序。

const [formData, setFormData] = useState({

    name: "",

    surname: "",

    email: "",

    password: "",

  });

脸书登录这里

<FacebookLogin

 appId=""

 autoLoad={true}

 fields="first_name,last_name,email,id"

 onClick={(e) => componentClicked(e)}

 callback={(response) => responseFacebook(response)}

 textButton={msg}

 cssClass="btn btn-primary btn-sm"

 icon="fa-facebook"

 />

数据即将到：

const responseFacebook = (response) => {

    setFormData({ ...formData, name: response.first_name });

    setFormData({ ...formData, surname: response.last_name });

    setFormData({ ...formData, email: response.email });

    setFormData({ ...formData, password: response.id });

    console.log(formData.name);

    console.log(formData.surname);

    /* register({ name, surname, email, password }); */

  };

我无法设置 formData.x。response.first_name或其他人正在使用控制台.log，但是当我尝试设置状态时，它什么也没变。

例如，控制台.log（formData.name） 不返回任何内容。

Answer 1

setFormData({ ...formData, name: response.first_name });setFormData({ ...formData, surname: response.last_name });setFormData({ ...formData, email: response.email });setFormData({ ...formData, password: response.id });问题是，在下一次渲染之前不会改变。的值是上一次渲染上的值，它将保持这种状态，直到下一次渲染。因此，上面的每一行，设置旧数据，加上一个已更改的属性。然后，接下来的行使用不同的已更改属性设置旧数据，并且您在此之前更改的属性将丢失。formDataformData您只想呼叫一次，并进行所需的所有更改。这样，在完成所有设置之前，您根本不需要更新。setFormDataformDatasetFormData({&nbsp; ...formData,&nbsp; name: response.first_name,&nbsp; surname: response.last_name,&nbsp; email: response.email,&nbsp; password: response.id,});但是，看看你在这里的状态结构，你根本不需要前面的值，因为每个键都在响应中：setFormData({&nbsp; name: response.first_name,&nbsp; surname: response.last_name,&nbsp; email: response.email,&nbsp; password: response.id,});

Answer 2

您应该使用以前的状态或仅调用一次。setFormData// using previous state// this solves your problem but isn't that good// because you don't need to call it many timesconst responseFacebook = (response) => {&nbsp; &nbsp; setFormData(prev => ({ ...prev, name: response.first_name });&nbsp; &nbsp; setFormData(prev => ({ ...prev, surname: response.last_name });&nbsp; &nbsp; setFormData(prev => ({ ...prev, email: response.email });&nbsp; &nbsp; setFormData(prev => ({ ...prev, password: response.id });};或// calling only onceconst responseFacebook = (response) => {&nbsp; &nbsp; setFormData({&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;name: response.first_name,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;surname: response.last_name,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;email: response.email,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;password: response.id&nbsp;&nbsp; &nbsp; });};

Answer 3

使用usestate来设置状态，使用effect钩子来控制台更改，你的状态不会改变，因为它是一个异步任务，在钩子中没有回调函数在设置状态像class一样，所以使用useEffectconst responseFacebook = (response) => {&nbsp; &nbsp; setFormData({&nbsp;&nbsp; &nbsp; &nbsp; ...formData,&nbsp;&nbsp; &nbsp; &nbsp; name: response.first_name&nbsp;&nbsp; &nbsp; &nbsp; surname: response.last_name,&nbsp; &nbsp; &nbsp; email: response.email,&nbsp; &nbsp; &nbsp; password: response.id&nbsp;&nbsp; &nbsp; });});useEffect(() => {&nbsp; &nbsp;console.log(formData.name);&nbsp; &nbsp; console.log(formData.surname);}, [formData]);

Answer 4

useState Hooks 是异步的，您将无法立即看到反映的数据，而是使用 useEffect 查看结果const responseFacebook = (response) => {&nbsp; &nbsp; setFormData({ ...formData, name: response.first_name });&nbsp; &nbsp; setFormData({ ...formData, surname: response.last_name });&nbsp; &nbsp; setFormData({ ...formData, email: response.email });&nbsp; &nbsp; setFormData({ ...formData, password: response.id });&nbsp; &nbsp; console.log(formData.name); // This won't show the results&nbsp; &nbsp; console.log(formData.surname); // This won't show the results&nbsp; &nbsp; /* register({ name, surname, email, password }); */ // This won't show the results&nbsp; };useEffect(() => {&nbsp; &nbsp; // action on update of formData&nbsp;console.log(formData);}, [formData]);此外，您还可以进一步优化代码以：&nbsp; &nbsp;setFormData({&nbsp;&nbsp; &nbsp; ...formData,&nbsp; &nbsp; name: response.first_name,&nbsp; &nbsp; surname: response.last_name,&nbsp; &nbsp; email: response.email,&nbsp; &nbsp; password: response.id&nbsp;&nbsp; &nbsp;});useEffect(() => {&nbsp; &nbsp; // action on update of formData&nbsp;console.log(formData);}, [formData]);