Question

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

我知道您可以使用类（多个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);

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]);

从API中使用多个React挂钩useEffect提取数据，第二次从第一个挂钩获取数据时使用效果

1 个答案: