通过更改API数据更改图标

Question

我想制作一个关于天气的网。在施工过程中，我意识到图标应该随着天气的变化而变化。

​

    let shiftIcon = () => {

        let icon = "";
        let iconText = data.date[0].weather.code;

        if (iconText == 600) {
            icon = "https://img.icons8.com/external-those-icons-lineal-color-those-icons/48/000000/external-wind-weather-those-icons-lineal-color-those-icons.png";
            return (
                <img src={icon} />
            );
        } else {
            return null;
        }
    }

   <div className="col col-3">
     {shiftIcon()}
 </div>

​

在写完这段代码后，我发现了一个错误。你有办法解决这个问题吗？

courses/Person/weather-application/src/components/boxNew.js:32 : TypeError:无法读取未定义的(阅读'0') shiftIcon E:/Projects和培训/教育课程/react.js的属性shiftIcon = () shiftIcon=() => { 30 \ 31 \ let图标= "“ [ 32 ]设iconText = data.date.weather.code；若(iconText == 600) { 35 ==图标= "https://img.icons8.com/external-those-icons-lineal-color-those-icons/48/000000/external-wind-weather-those-icons-lineal-color-those-icons.png"；

Answer 1

最初，data是未定义的。您应该使用可选链来消除运行时异常。

试着像这样

let iconText = data?.date?.[0]?.weather?.code;