Javascript 当第二次从第一个钩子获取数据时，使用多个React hook useffect从API获取数据

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

我知道你可以用类（多个axios-get）来实现这一点，但我正试图用钩子来实现这一点

我有一个构建了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 };
  }
};

RenderObjects.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);

但这是可行的：

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

const { response, isError } = await getUserObject(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]);