我怎样才能让这个简单的 API 获取调用工作？

Question

我是一名新的 React 开发人员。尝试使用挂钩调用 API 并在屏幕上显示数据（之后会尝试扰乱分页和过滤结果）但是由于某种原因，获取调用不起作用，当我显示它时它会起作用在 Postman 中但不在我的应用程序中

***main state***

const [apiData, setApiData] = useState({})

***my use Effect hook***

useEffect(() => {

async function getMusicData(){
const music = await fetch('theaudiodb.com/api/v1/json/523532/searchalbum.php?s=daft_punk')
.then(res => res.json())
setApiData(music)
console.log(apiData)
}
console.log(apiData)
getMusicData()
},[])

***my rendering attempt***

return (
<Router>
<Navbar />
{dataApi.map((s, i) => (

))}
</Router>
);

再次（括号下也有红色波浪线！）showing the red squiggly:

Showing API call results in postman

console.log(apiData/music) gets me this also

如果我能为您提供更多信息，请告诉我，我想首先了解为什么它不起作用！感谢您的回复

Answer 1

Reference doc

删除“.then”关键字，不需要那个。

 const music = await fetch('theaudiodb.com/api/v1/json/523532/searchalbum.php?s=daft_punk');

这一行之后就这样写：

 let response = await music.json();

Answer 2

首先你的url是错误的。你的抓取 url 应该有 https

https://theaudiodb.com/api/v1/json/523532/searchalbum.php?s=daft_punk

所以，如果您使用 async 关键字，这意味着 fetch 将异步工作，因此您不需要 then() 函数。

你应该喜欢这个

 const music = await fetch(
    "https://theaudiodb.com/api/v1/json/523532/searchalbum.php?s=daft_punk"
  );
  const response = await music.json();

那么你应该使用你的 setApiData()

  setApiData(response);

如果你在这里添加 console.log(apiData) 你什么也看不到。因为您的 setApiData() 函数是异步的，所以您可以在下次渲染时看到它。

I get a red squiggly under the brackets also!

我认为，这是关于括号之间的间距。您应该添加 html 元素（div、跨度等...）

最后，我修复了你的代码。你可以看看。

export default function App() {
  const [apiData, setApiData] = useState([]);

  useEffect(() => {
    async function getMusicData() {
      const music = await fetch(
        "https://theaudiodb.com/api/v1/json/523532/searchalbum.php?s=daft_punk"
      );
      const response = await music.json();

      setApiData(response.album);
    }
   
    getMusicData();
  }, []);

  return (
    <div className="App">
      {apiData.map((s) => (
        <div key={s.idAlbum}>{s.strAlbum}</div>
      ))}
    </div>
  );
}

https://codesandbox.io/s/elegant-rgb-3zzo3f?file=/src/App.js:395-401

我怎样才能让这个简单的 API 获取调用工作？

How can I get this simple API fetch call work?

api

reactjs

use-effect