使用react js显示laravel passport API数据时出错

2mbi3lxu 于 2023-08-08 发布在 React

关注(0)|答案(1)|浏览(88)

我遇到了一个问题，当我用ReactJs从Laravel passport API中检索数据时，但是当我试图显示它们或发送到另一个组件时，我遇到了一个错误。下面是我使用的代码。

const [user, setUser] = useState({});   

    const myHeaders = new Headers();
    myHeaders.append("Authorization", `Bearer ${localStorage.getItem("token")}`);

    const myInit = {
      method: "GET",
      headers: myHeaders,
      mode: "cors",
      cache: "default",
    };

    useEffect(() => {

       async function fetchUserData()
      {
        fetch("http://localhost:8000/api/user", myInit)
          .then((response) => {
            const data = response.json();

            setUser(data);
          });
      }
      fetchUserData();
    }, [])
    console.log(user.name)
    console.log(user);

字符串
这是控制台中显示的错误：

的数据

laravel

来源：https://stackoverflow.com/questions/76834234/error-displaying-laravel-passport-api-data-with-react-js

1条答案

按热度按时间

4xrmg8kj1#

有一个主要的问题i。也就是说，response.json()是异步的，因此返回一个Promise，所以你要么使用await，要么使用then()来链接continuation。此外，您应该检查响应的HTTP状态代码，以确保您获得数据。最后但并非最不重要的是，您应该捕获fetch()可能抛出的错误，例如。当您的服务器处于脱机状态等。使用try-catch块（当使用async/ await时）或catch()（当链接Promise s时）。我建议使用async/ await或链接。大多数人更喜欢async/ await，因为它允许编程，就像调用同步发生一样。

const [user, setUser] = useState({});

const myHeaders = new Headers();
myHeaders.append("Authorization", `Bearer ${localStorage.getItem("token")}`);

const myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

useEffect(() => {

  async function fetchUserData() {
    fetch("http://localhost:8000/api/user", myInit)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`Status code '${response.status}': Failed to retrieve user details.`);
        }
        return response.json()
      })
      .then(data => setUser(data))
      .catch(err => console.error(err));
  }
  fetchUserData();
}, [])
console.log(user.name)
console.log(user);

字符串

赞(0）回复(0）举报 2023-08-08

我来回答

使用react js显示laravel passport API数据时出错

1条答案

相关问题

热门标签

最新问答