反应 State 挂钩 - 我无法设置 state

Question

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

const [formData, setFormData] = useState({
    name: "",
    surname: "",
    email: "",
    password: "",
  });

Facebook 在这里登录

<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 或其他人正在使用 console.log，但是当我尝试设置 state 时，它什么也没有。

例如，console.log(formData.name) 什么也不返回。

Answer 1

您应该使用以前的 state 或只调用一次setFormData 。

// using previous state
// this solves your problem but isn't that good
// because you don't need to call it many times
const responseFacebook = (response) => {
    setFormData(prev => ({ ...prev, name: response.first_name });
    setFormData(prev => ({ ...prev, surname: response.last_name });
    setFormData(prev => ({ ...prev, email: response.email });
    setFormData(prev => ({ ...prev, password: response.id });
};

或者

// calling only once
const responseFacebook = (response) => {
    setFormData({ 
         name: response.first_name,
         surname: response.last_name,
         email: response.email,
         password: response.id 
    });
};

Answer 2

setFormData({ ...formData, name: response.first_name });
setFormData({ ...formData, surname: response.last_name });
setFormData({ ...formData, email: response.email });
setFormData({ ...formData, password: response.id });

问题是formData在下一次渲染之前不会改变。 formData的值是上一次渲染的值，并且在下一次渲染之前一直保持这种状态。 因此，上述每一行都设置了旧数据，加上一个更改的属性。 然后下一行将旧数据设置为具有不同的更改属性，并且您之前更改的属性将丢失。

您只想调用setFormData一次，并进行所有您想要的更改。 这样，在完成所有设置之前，您根本不需要formData进行更新。

setFormData({
  ...formData,
  name: response.first_name,
  surname: response.last_name,
  email: response.email,
  password: response.id,
});

---

但是在这里查看您的 state 的结构，您根本不需要以前的值，因为每个键都在响应中：

setFormData({
  name: response.first_name,
  surname: response.last_name,
  email: response.email,
  password: response.id,
});

Answer 3

use usestate to set state and useeffect hook to console change, your state doesnt change because its an asynchronous task, in hooks there no callback function in setting state like class, so use useEffect

const responseFacebook = (response) => {
    setFormData({ 
      ...formData, 
      name: response.first_name 
      surname: response.last_name,
      email: response.email,
      password: response.id 
    });
});

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

Answer 4

useState Hooks 是异步的，您将无法立即看到反映的数据，而是使用 useEffect 来查看您的结果

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); // This won't show the results
    console.log(formData.surname); // This won't show the results
    /* register({ name, surname, email, password }); */ // This won't show the results
  };

useEffect(() => {
    // action on update of formData
 console.log(formData);
}, [formData]);

---

您还可以进一步优化您的代码：

   setFormData({ 
    ...formData,
    name: response.first_name,
    surname: response.last_name,
    email: response.email,
    password: response.id 
   });

useEffect(() => {
    // action on update of formData
 console.log(formData);
}, [formData]);