无法使用Reactjs获取记录

e5nszbig  于 2023-03-22  发布在  React
关注(0)|答案(1)|浏览(81)

我在Reactjs上工作,我试图获取数据,现在我在控制台(响应)中从API获取数据,但无法在页面中显示数据,我错了,在控制台中我以以下格式获取数据

0:{id: '28', title: 'first blog', image: 'https://xxxx.jpg', description: 'ABC', status: 'active', …}
1:{id: '27', title: 'second blog', image: 'xxxxx.png', description: 'XYZ', status: 'active', …}
...

我尝试了以下代码

export default function Article() {
  const { translate } = useLocales();
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    getArticles().then((response) => {
        console.log(response); // getting data in console
        
      if (response.items) {
        const data = response.items.map((item) => {
          return {
            img: item.image,
            title: item.title,
            }
        });
        setArticles(data);
      }
    });
  }, []);
}
cotxawn7

cotxawn71#

response看起来像一个数组,但您是通过response.items访问它的。
代码应该是这样的:

export default function Article() {
    const { translate } = useLocales();
    const [articles, setArticles] = useState([]);

    useEffect(() => {
        getArticles().then((response) => {
            console.log(response); // getting data in console

            if (response) {
                const data = response.map((item) => {
                    return {
                        img: item.image,
                        title: item.title,
                    }
                });
                setArticles(data);
            }
        });
    }, []);
}

相关问题