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

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

setFormData({

  ...formData,

  name: response.first_name,

  surname: response.last_name,

  email: response.email,

  password: response.id,

});

但是，看看你在这里的状态结构，你根本不需要前面的值，因为每个键都在响应中：

setFormData({

  name: response.first_name,

  surname: response.last_name,

  email: response.email,

  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 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 3

使用usestate来设置状态，使用effect钩子来控制台更改，你的状态不会改变，因为它是一个异步任务，在钩子中没有回调函数在设置状态像class一样，所以使用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]);