.map() 显示来自 api 的数据的问题 [重复]答案

【问题标题】：problems with .map() to display data from api [duplicate].map() 显示来自 api 的数据的问题 [重复]
【发布时间】：2020-11-18 22:36:10
【问题描述】：

所以，我从 api 获取数据，当我在控制台记录响应时，我能够按预期看到 api。我将数据存储在状态中，但是每当我想迭代状态以在屏幕中返回数据时，我都会收到地图未定义错误。我已经尝试了在这里找到的所有东西，但没有任何效果。请帮我解决一下这个。谢谢

...
const [state, setState] = useState([]);
  let headers = new Headers();
  headers.set("Authorization", "Basic " + btoa(username + ":" + password));

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

  const getData = async () => {
    const a = await fetch(url, { method: "GET", headers: headers });
    const response = await a.json();
    setState(response);
    console.log(response);
  };
  // console.log(state)

  return (
    <div>
      {state.data.map((test) => (
        <div>
          <p>{test.place}</p>
        </div>
      ))}
    </div>
  );
};

export default FetchApi;

API

{
    "data": [
        {
            "type": "Other",
            "place": "US",
            "attributes": [
                {
                    "displayName": "name",
                    "value": "Jenna"
                },
                {
                    "displayName": "Gender",
                    "value": "Female"
                },
                {
                    "displayName": "Phone_number",
                    "value": "+12346543"
                }
            ]
        }
        
    ]
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您正在使用原始响应，所以首先

// change this
const [state, setState] = useState([]);

// to this
const [state, setState] = useState({});

因为在第一次渲染中，state.data 是undefined，所以一定要处理好这种情况

return (
  <div>
    {(state.data || []).map((test) => (
      <div>
        <p>{test.place}</p>
      </div>
    ))}
  </div>
);

【讨论】：

谢谢你成功了。不知道这种方法。