时间戳

首页 > 解决方案 > 反应.js。如何仅显示获取的 API 的第一个对象？

reactjs - 反应.js。如何仅显示获取的 API 的第一个对象？

问题描述

我试图只显示 API 的第一个对象，我在控制台中成功了，但是当我把它放在 useState 中时，它给了我一个错误， Parsing error: Unexpected token, expected "," 这是我的代码，我想我有错字，但找不到

import Meme from "./Meme";

export default function App() {
  const [data, setData] = useState([]);

const fetchData  = () => {
  fetch("https://api.imgflip.com/get_memes")
  .then(res => res.json()) 
  .then(result =>{ setData(result.data.memes) /*.then(result =>{ setData(result.data.memes[0]<<-- this will give an error*/
  console.log(result.data.memes[0])
  }
  )
  .catch(err => console.log("error"))
  }

  useEffect(() => {
    fetchData()
  }, [])



  return (
    <div className="App">
   {data.map((element, index) => (
          <Meme
            key={index}
            title = {element.name} 
            image = {element.url}
          />
        ))}
    </div>
  );
}

```

标签： reactjs

解决方案

你可以改变这个：

setData(result.data.memes)

至 ：

setData([result.data.memes[0]])

或者

如果你一直只需要第一个元素，你应该这样做

改变 ：

const [data, setData] = useState([]);

setData(result.data.memes)

至 ：

const [data, setData] = useState({});

setData(result.data.memes[0])

或者

您可以只使用渲染中的第一个元素。

推荐阅读