apidata.map 不是函数：ReactJS

Question

谁能告诉我为什么会出现此错误。我整天都在尝试修复它，但我无法修复它。所以最后我不得不来到 Whosebug

这是我的代码：App.js

import "./App.css";

function App() {
  const [inputvalue, setInputvalue] = useState(" ");
  const [apidata, setApidata] = useState([]);
  const [finalpoint, setFinalpoint] = useState("");
  useEffect(() => {
    fetch(
      `https://weatherapi-com.p.rapidapi.com/forecast.json?q=+${inputvalue}&days=3`,
      {
        method: "GET",
        headers: {
          "x-rapidapi-host": "weatherapi-com.p.rapidapi.com",
          "x-rapidapi-key":
            "7f89bf16ebmsh9dff0f23f963d34p190691jsn264543e18108",
        },
      }
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setApidata(data);
      })
      .catch((err) => {
        console.error(err);
      });
  }, [finalpoint]);

  const onchangeinput = (e) => {
    setInputvalue(e.target.value);
  };

  const onsubmithandler = (e) => {
    e.preventDefault();
    setFinalpoint(inputvalue); 
  };

  return (
    <div className="App">
      <div className="main">
        <h2>Welcome To weather App </h2>
      </div>

      <form onSubmit={onsubmithandler}>
        <input type="text" value={inputvalue} onChange={onchangeinput} />
        <button type="submit">Search</button>
      </form>
      {apidata.map((data, i) => {
        return <h1>{data.current.feelslike_c}</h1>;
      })}
    </div>
    //Map
  );
}

export default App;

这是我收到的错误： enter image description here

Answer 1

检查您是否在此处收到未定义：

.then((data) => {
   setApidata(data);
 })

并用 undefined 覆盖状态。

Answer 2

我看到的是 api 最初返回一个错误对象。此外，当返回正确的数据时，它会作为对象返回。设置状态时，必须在数组内设置数据（如果要使用 map 方法）。您还必须通过执行以下操作来处理错误：

import { useState, useEffect } from "react";

function App() {
  const [inputvalue, setInputvalue] = useState(" ");
  const [apidata, setApidata] = useState([]);
  const [finalpoint, setFinalpoint] = useState("");
  useEffect(() => {
    fetch(
      `https://weatherapi-com.p.rapidapi.com/forecast.json?q=+${inputvalue}&days=3`,
      {
        method: "GET",
        headers: {
          "x-rapidapi-host": "weatherapi-com.p.rapidapi.com",
          "x-rapidapi-key": "7f89bf16ebmsh9dff0f23f963d34p190691jsn264543e18108"
        }
      }
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data)
        if (data.error) return null;
        setApidata([data]);
      })
      .catch((err) => {
        console.error(err);
      });
  }, [finalpoint]);

  const onchangeinput = (e) => {
    setInputvalue(e.target.value);
  };

  const onsubmithandler = (e) => {
    e.preventDefault();
    setFinalpoint(inputvalue);
  };

  console.log("test", apidata);


  return (
    <div className="App">
      <div className="main">
        <h2>Welcome To weather App </h2>
      </div>

      <form onSubmit={onsubmithandler}>
        <input type="text" value={inputvalue} onChange={onchangeinput} />
        <button type="submit">Search</button>
      </form>
      {apidata.length
        ? apidata.map((data, i) => {
            return <h1 key={i}>{data.current.feelslike_c}</h1>;
          })
        : null}
    </div>
    //Map
  );
}

查看工作示例：https://codesandbox.io/s/eager-wind-06ywo?file=/src/App.js

apidata.map 不是函数：ReactJS

apidata.map is not a function : ReactJS

javascript

error-handling

reactjs