如何访问api并映射数据？答案

【问题标题】：how to access the api and map the data?如何访问api并映射数据？
【发布时间】：2022-08-17 19:23:44
【问题描述】：

我无法访问 api 并映射数据。我不知道如何正确设置响应。也不知道如何输入对象的属性 ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// ////////

文件新列表：

import React from \'react\';
import { useState, useEffect } from \'react\'
import { getNews } from \'../../api/drupalAPI\'


export const NewsList = () => {
   
    const [newsList, setNewsList] = useState()

    const fetchNewsList = async () => {
            getNews().then((response)=>{
                setNewsList(JSON.stringify(response));
            }).catch ( (error)  => {
                console.error(error);
                throw error;
            });
        }
      
 

    useEffect (() => {
        fetchNewsList();  
    }, []);

   return (
        <div>
            {
                newsList.map(news => (
                   
                        <div>{news.title}</div>
                   
                ))
            }
        </div>
   ); 
}

file api

import {News} from \'@icofcv/common\';
import store from \'../store\';

function getHeaders() {
    let headers = {
        \'content-type\': \'application/json;charset=UTF-8\'
      };

    if (store.getState().session.credentials) {
        headers[\'Authorization\'] = `Bearer ${store.getState().session.credentials.accessToken}`;
    }

    return headers;
}

export async function getNews(): Promise<News[]>  { 
            const filter = {
              \"offset\": 0,
              \"limit\": 100,
              \"skip\": 0,
              \"fields\": {
                \"id\": true,
                \"title\": true,
                \"creationDate\": true,
                \"enabled\": true
              }
            };
      
            const response = await fetch(\'/news?filter=\'+encodeURIComponent(JSON.stringify(filter)), {
              method: \"GET\",
              headers: getHeaders()
            });

            const data = await response.json();

            if (response.ok) {
                return data;
            }
            else {
                return Promise.reject(response.status);
            }

  }

标签： reactjs

【解决方案1】：

不需要stringify 结果。直接设置结果

setNewsList(response);

【讨论】：