Question

我正在尝试更新数据库中的用户信息每次发生新变化时，都会在 handleChange 函数上进行操作，但是即时通讯面临的问题是我必须等待setdata直到完成，然后再更新用户信息才能解决该问题

  const [mydata, setData] = useState({
    user_gender: "",
    user_relationship: "",
    user_birth_day: "",
    user_birth_month: "",
    user_gender_interest: "",
    user_birth_year: "",
    user_interests: {
      dancing: false,
      family: false,
      art: false,
      photography: false,
      friends: false,
      travel: false
    }
  });

const handleChange = event => {
    setData({
      ...mydata,
      [event.target.name]: event.target.value
    });
    async function update() {
      await updateUserInfo(mydata[event.target.name], stableDispatch);
    }
    update();
  };

Answer 1

调用updateUserInfo（）作为回调。

您可以将函数作为第二个参数传递给setState（），当设置状态时会自动调用该函数。

useEffect(() => {
  updateUserInfo(mydata[event.target.name], stableDispatch));
}, [mydata]);

Answer 2

这里的解决方案是将状态复制到变量中，您可以使用该变量来更新状态和userInfo

const handleChange = event => {

    const data = {
      ...mydata,
      [event.target.name]: event.target.value
    }
    setData(data);
    async function update() {
      await updateUserInfo(data[event.target.name], stableDispatch);
    }
    update();
  };

在reactjs中使用useState钩子使用回调

2 个答案: