使用多个 React 钩子 useEffect 从 API 中获取数据，当第二次获取时使用第一个钩子中的数据

Question

我正在学习如何使用 Hooks，当第二个钩子将第一个钩子的结果作为参数时，我正在尝试从 2 个带有 2 个钩子的源中获取数据。

我知道你可以用类（多个 axios 获取）来做到这一点，但我正在尝试用钩子来做到这一点。

我有一个文件，我在其中构建了 axios.get 和一个我尝试渲染数据的文件。

我尝试将{user.id}放入第二个钩子中，但它不起作用。 当我将用户 id 的值（例如“1”）放入第二个钩子时，它就起作用了。

长话短说，我试图找到最好的方法来只显示连接的用户对象......我不是专家，所以可能有更好的方法来做到这一点。

知道如何做到这一点吗？ 谢谢你帮助我！！！

这是代码：

GetObjects.js：

export const getUser = async (id) => {
  const url = `http://127.0.0.1:8000/api/user`;
  try {
    const response = await axios.get(url);
    return { response, isError: false };
  } catch (response) {
    return { response, isError: true };
  }
};

export const getUserObject = async (userId) => {
  const url = `http://127.0.0.1:8000/api/objects/?owner=${userId}`;
  try {
    const response = await axios.get(url);
    return { response, isError: false };
  } catch (response) {
    return { response, isError: true };
  }
};

渲染对象.js

...
function FetchUserObjects(props) {
    const [objects, setObjects] = useState([]);
    const [user, setuser] = useState([]);

    useEffect(() => {
        const loadUser = async () => {
          const { response, isError } = await getUser();
          if (isError) {
            setuser([]);
          } else {
            setuser(response.data);
          }
        };
        loadUser();
      }, []);

    
    useEffect(() => {
      const loadObjects = async () => {
        const { response, isError } = await getUserObject();
        if (isError) {
          setObjects([]);
        } else {
          setObjects(response.data);
        }
      };
      loadObjects();
    }, []);

所以这是行不通的：

const { response, isError } = await getUserObject({user.id});

但这是有效的：

const { response, isError } = await getUserObject(1);

Answer 1

尝试一下：

function FetchUserObjects(props) {
    const [objects, setObjects] = useState([]);
    const [user, setuser] = useState([]);

    useEffect(() => {
        const loadUser = async () => {
          const { response, isError } = await getUser();
          if (isError) {
            setuser([]);
          } else {
            setuser(response.data);
          }
        };
        loadUser();
      }, []);

    
    useEffect(() => {
    if (!user) return
      const loadObjects = async () => {
        const { response, isError } = await getUserObject(user.id);
        if (isError) {
          setObjects([]);
        } else {
          setObjects(response.data);
        }
      };
      loadObjects();
    }, [user]);