Question

发布请求后，我收到来自axios的回叫。回调包含我需要使用的数据。我想将回调json数据添加到我的现有状态-但是在谷歌搜索后，我了解到回调+ usestate挂钩不能很好地协同工作。

const [party, setParty] = useState("")

const SubmitParty = (e) => {

    e.preventDefault()

    const PartyData = {
        party: party,
        firstname: firstname,
        lastname: lastname,
        email: email,
        number: number
    }

    axios.post(
        '/api/new/party',
        {
            party: party,
            firstname: firstname,
            lastname: lastname,
            email: email,
            number: number
        },
        {
            params: {
                "secret_token": logged.token
            }
        }
    ).then(res => {


    var user = res.data.data;
    console.log(user); //I can see the response here and the array I want.

    setParty(user);

     console.log(party); // returns just a blank line. Expected to be same as user



        }).catch(err => {
            console.log(err)
            alert("Oops something went wrong. If this problem continues, please contact support asap!")
        });
}

我后来尝试使用useeffect，但这是一个陷阱22，因为我需要在useeffect中准确处理状态。

Answer 1

如果您像这样使用useEffect，则组件将发送API请求并在解析后更新party。

const [party, setParty] = useState("");

useEffect(e => {
  e.preventDefault();

  const PartyData = {
    party: party,
    firstname: firstname,
    lastname: lastname,
    email: email,
    number: number
  };

  axios
    .post(
      "/api/new/party",
      {
        party: party,
        firstname: firstname,
        lastname: lastname,
        email: email,
        number: number
      },
      {
        params: {
          secret_token: logged.token
        }
      }
    )
    .then(res => {
      var user = res.data.data;
      console.log(user); //I can see the response here and the array I want.

      setParty(user);

      console.log(party); // returns just a blank line. Expected to be same as user
    })
    .catch(err => {
      console.log(err);
      alert(
        "Oops something went wrong. If this problem continues, please contact support asap!"
      );
    });
});

默认情况下，它将在每个渲染器上运行。如果只想让效果只运行一次，则应将useEffect的第二个参数设置为一个空数组，或者如果只希望当特定的几项更改时才运行，则可以将它们放入数组中

使用JSON数据回调后设置状态

1 个答案: