TypeError: state.confirmed.map is not a function

Question

我尝试从 Reacts 上的一个 API 获取数据。我尝试了每一种可能性来在浏览器上呈现数据，但我不知道我做错了什么？

这是app.js

import React, { useState, useEffect } from "react";
import { stat } from "fs";

function App() {
  const [loading, setLoading] = useState(false);
  const [state, setstate] = useState({
    confirmed: "",
    recovered: "",
    death: ""
  });

  useEffect(() => {
    coronaData();
  }, []);
  const coronaData = async () => {
    setLoading(true);
    try {
      const response = await fetch(
        "https://w3qa5ydb4l.execute-api.eu-west-1.amazonaws.com/prod/finnishCoronaData"
      );
      const data = await response.json();
      console.log(data.confirmed);
      setstate({
        confirmed: data,
        recovered: data.recovered,
        death: data.death === null ? null : alert("Lucikily No-one died")
      });
    } catch (error) {
      console.log(error, "FAILED TO FETCH");
    }
    setLoading(false);
  };
  return (
    <div className="App">
      {state.confirmed.map(list => {
        return (
          <ul>
            <li>{list.healthCareDistrict}</li>
          </ul>
        );
      })}
    </div>
  );
}

export default App;

**忽略此消息，为了post这个问题，我需要写更多。 **

Answer 1

原因是您在 useState() 中使用空字符串作为 state.confirmed 的默认值。从技术上讲，.map() 只能用于导致错误的数组，因为应用程序试图调用空字符串。

我会在最初定义时更改为[]：

const [state, setstate] = useState({
    confirmed: [],
    recovered: "",
    death: ""
  });

我相信此更改也适用于以后的 recovered。目前您并没有像看起来那样在代码中使用。

希望对您有所帮助！

TypeError: state.confirmed.map is not a function

TypeError: state.confirmed.map is not a function

javascript

browser

rendering

fetch

reactjs