javascript - 当第二次从第一个钩子中获取使用数据时，使用多个 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);

标签： javascriptreactjsapireact-hooksfetch-api

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