TypeError: state.confirmed.map не является функцией

Question

Я пытаюсь получить данные из одного API на Reacts. Я пробовал каждую возможность визуализации данных в браузере, но я не знаю, что я делаю неправильно?

Это приложение. 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;

** Не обращайте внимания на это сообщение, чтобы написать этот вопрос, мне нужно написать больше. **

Answer 1

Причина в том, что вы используете пустую строку в качестве значения по умолчанию для state.confirmed в useState(). Технически .map() может использоваться только для массивов, которые вызвали ошибку, поскольку приложение пыталось вызвать пустую строку.

Я бы изменил на [] при первоначальном определении:

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

Я считаю, что это изменение также относится и к recovered позже. В настоящее время вы не используете в своем коде, как кажется.

Надеюсь, это поможет!