javascript - 为什么我无法访问 react 中的数组列表

Question

我获取一些日期并获取数组，我可以 console.log 并查看所有工作人员，但是当我尝试映射或访问数组中的某些元素时，我收到错误未定义...

然后得到这个 未处理的拒绝(TypeError):无法读取未定义的属性“map”

  const [key, setKey] = useState(false);
  const [country, setCountry] = useState([]);
  const [nextFive, setFive] = useState([]);

  useEffect(() => {
    getWeather();
  }, [key]);


  const getCity = async (e) => {
    e.preventDefault();
    const cityName = e.target.elements.cityName.value;
    const api_call = await fetch(`http://dataservice.accuweather.com/locations/v1/cities/search?apikey=${process.env.REACT_APP_WEATHER_API_KEY}&q=${cityName}&details=true`);
    const data = await api_call.json();
    setKey(data[0].Key);
    setCountry(data[0]);
    return data[0].Key;
  }


    const getWeather = async (cityKey = key) => { 
      const proxy = `https://cors-anywhere.herokuapp.com/`;
      const link = `${proxy}http://dataservice.accuweather.com/forecasts/v1/daily/5day/${cityKey}?apikey=${process.env.REACT_APP_WEATHER_API_KEY}&details=true&metric=true`;

      const api_call = await fetch(link);
      const data = await api_call.json();
      setFive(data.DailyForecasts);

    };


console.log(nextFive); if i tray console.log(nextFive[0].something) i will get error  :) 
console.log(country);

      {
        nextFive.map((item) => {
          return <p>{item.Date}</p>
        })
      }

并得到此未处理的拒绝(TypeError):无法读取未定义的属性“map”

Answer 1

发生这种情况是因为您尝试显示数组中尚未填充的项目的第一个元素。

你可以有一个额外的钩子(Hook)，例如weatherLoading，一旦API调用成功，你就可以将weatherLoading的状态设置为true，然后简单地执行以下操作:

weatherLoading && console.log(nextFive[0].something)