如何防止在 Axios 中获得多个响应反应本机？

Question

我想从数据库中获取数据。函数 CurrentUserId 获取当前用户的详细信息。我需要使用 GetTemplate 函数获取数据问题是我得到的多个响应包含相同的数据。不知道哪里出了问题

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

  const CurrentUserID = async () => {
    const token = await AsyncStorage.getItem("token");
    fetch("/", {
      headers: new Headers({
        Authorization: "Bearer " + token,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        // console.log(data);
        setId(data._id);
        console.log(id);
      });
  };
  const GetTemplates = async () => {
    await axios
      .get(`/api/user/${id}`)
      .then((response) => {
        setdata(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  };
useEffect(() => {
  CurrentUserID();
  GetTemplates();
}, []);

Answer 1

我认为我们应该在 id 出现后才调用 GetTemplates()。当前，您甚至在设置 id 之前就在 useEffect 中的初始渲染中调用 GetTemplates()。

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

useEffect(() => {
  CurrentUserID();
}, []);

// Get Templates only when id changes
useEffect(() => {
  if (!id) return; // Initial Render, If id is empty do nothing
  GetTemplates();
}, [id]);

const CurrentUserID = async () => {
  const token = await AsyncStorage.getItem("token");
  fetch("/", {
      headers: new Headers({
        Authorization: "Bearer " + token,
      }),
    })
    .then((res) => res.json())
    .then((data) => {
      // console.log(data);
      setId(data._id);
      console.log(id);
    });
};

const GetTemplates = async () => {
  await axios
    .get(`/api/user/${id}`)
    .then((response) => {
      setdata(response.data);
    })
    .catch(function(error) {
      console.log(error);
    });
};

如何防止在 Axios 中获得多个响应反应本机？

how to prevent getting multiple responses in Axios react native?

reactjs

react-native

axios