Question

我正在运行axios get请求，但第一次尝试似乎未设置该值。

奇怪的是它确实在第二次尝试中设置了。

我指向ID。

钩子是

const [id, setId] = useState("");

但是，在第一次通过时，该ID为空白（您可以看到我的评论）

这是axios请求。

const setDevice = async () => {
    setIsLoading(true);
    setShowModal(false);
    try {
      console.log("trying")
      console.log("Serial Number is " + serialNumber)
      const response = await axios.get(
        url + serialNumber,
        {
          headers: { Authorization: authHeader },
        }
        
      );
      //This does not seem to be working
      setId(response.data.mobile_devices[0].id);
    } catch (err) {
      console.log("Failed");
      setError("Something went Wrong");
      setIsLoading(false);
      setShowModal(false);
      setShowErrorModal(true);
    }
    //because this is blank
    console.log("trying to put with id of " + id)
    await axios.put(
      url + id,
      body,
      {
        headers: {
          Authorization: authHeader,
          "Content-Type": "application/xml",
        },
      }
    );
    setIsLoading(false);
  };

这是get请求中的数据

Object {
  "mobile_devices": Array [
    Object {
      "department": "",
      "department_name": "",
      "email": "",
      "email_address": "",
      "id": 1,
      "position": "",
      "realname": "",
      "room": "",
      "username": "",
    },
  ],
}

Answer 1

问题在于，用setId(<some id>)执行的状态更新是异步的。因此，您将无法立即访问新设置的ID。

为处理某些代码取决于更新状态的情况，引入了useEffect hook。在您的组件以新状态更新并接受一系列依赖项（在您的情况下，这是id）后将调用它。

在您的情况下，您可以这样使用它：

useEffect(() => {
    // check that id is already set
    if (id) {
      axios.put(
        url + id,
        body,
        {
          headers: {
            Authorization: authHeader,
            "Content-Type": "application/xml",
          },
        }
      ).then(() => {
        setIsLoading(false);
      }).catch(error => {
         //handle errors here if needed.
      })
    }
}, [id, setIsLoading]);

请注意将其放置在useState函数（const [id, setId] = useState("");）之下

更新

原来，状态中不需要ID，并且应该在调用setDevice时而不是在ID更改时完成put请求。在这种情况下，不需要使用useEffect钩子，并且可以使用获得的id来完成put请求：

const setDevice = async () => {
    try {
      const response = await axios.get("url" + serialNumber, {
        headers: { Authorization: authHeader },
      });
      const id = response.data.mobile_devices[0].id;
      await axios.put(
          url + id,
          body,
          {
            headers: {
              Authorization: authHeader,
              "Content-Type": "application/xml",
            },
          }
        )
    } catch (err) {
      setError("Something went Wrong");
      setIsLoading(false);
      setShowModal(false);
      setShowErrorModal(true);
    }
  };

Answer 2

很抱歉，这种行为是完全正常的。在挂钩中，setId是异步的，因此不能保证下一行id包含setId中设置的值。

如果您希望每次更改他的价值时都获得id的价值，则必须使用useEffect钩子。像这样：

useEffect(() => {
   console.log("this is the value of id: " + id);
}, [id]);

如您所见，我将id放在了useEffect部门列表中。这意味着每次您更改useEffect的值时都会触发id。

React Native，useState似乎没有设置值

2 个答案: