API通信処理がうまくいかない

Question

前提・実現したいこと

現在、Next.jsとJavaScriptを用いて天気予報のアプリを作成しています。
openweathermap（https://openweathermap.org/）でAPIを発行しています。また予め各都市の緯度経度などをjson形式でまとめた物を別ファイルで用意し、それを様々なファイルで読み込んで利用しています。

検索欄で都市名を打ち込んで表示された都市をクリックした際に、コンソールに緯度軽度を表示させようとしたら、以下のようにエラーが出てしまいます。

下記に関連するファイルのソースコードを添付いたします。

該当のソースコード

SearchBox.js

import React from 'react'
import cities from '../lib/city.list.json'
import { useState } from 'react'
import Link from 'next/link'

export default function SearchBox() {
    const [query, setQuery] = useState('')
    const [result, setResult] = useState([])
    const onChange = (e) => {
        const {value} = e.target
        setQuery(value)

        let matchingCities = [];

        if(value.length > 3) {
            for(let city of cities) {
                if(matchingCities.length >= 5) {
                    break;
                }
                const match = city.name.toLowerCase().startsWith(value.toLowerCase());
                if(match) {
                    const cityData = {
                        ...city,
                        slug: `${city.name.toLowerCase().replace(/ /g, '-')}-${city.id}`
                    }
                    matchingCities.push(cityData);
                }
            }
        }
        return setResult(matchingCities)
    }
    return (
        <div className='search'>
            <input type='text' value={query} placeholder='気になる場所は？' onChange={onChange}/>
            {query.length > 3 && (
                <ul>
                    {result.length > 0 ? (
                        result.map((city) => (
                            <li key={city.slug}>
                                <Link href={`/location/${city.slug}`}>
                                    <a>
                                        {city.name}
                                        {city.state ? `, ${city.state}` : ''}
                                        <span>({city.country})</span>
                                    </a>
                                </Link>
                            </li>
                        ))
                    ) : (
                        <li className='search__no-results'>No results found</li>
                    )}
                </ul>
            )}
        </div>
    )
}

[city.js]

import React from 'react';
import cities from '../../lib/city.list.json';

export async function getServerSideProps(context) {
    const city = getCity(context.params.city);

    const res = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${city.coord.lat}&lon=${city.coord.lon}&appid=${process.env.API_KEY}&units=metric&exclude=minutely`);
    console.log(city)
    const data = await res.json();
    if(!data) {
        return {
            notFound: true
        };
    }

    console.log(data);

    const slug = context.params.city;
    return {
        props: {
            slug: slug,
            data: data
        }
    }
};

const getCity = param => {
    const cityParam = param.trim();
    const splitCity = cityParam.split('-')
    const id = splitCity[splitCity.length - 1]
    if(!id) {
        return null
    };

    const city = cities.find((city) => city.id.toString() == id)
    if(!city) {
        return city
    } else {
        return null
    };
};

const getHourlyWeather = (hourlyData) => {
    const current = new Date();
    current.setHours(current.getHours(), 0,0,0);
    const tomorrow = new Date(current);
    tomorrow.setDate(tomorrow.getDate() + 1)
    tomorrow.setHours(0,0,0,0)
}

export default function City({slug, data}) {
    console.log(data)
    return (
        <div>
            <h1> City page</h1>
            <h2>{slug}</h2>
        </div>
    )
}

上記で述べた、json形式のファイルは大変長いものになっているので、一部のみ抜粋したします。
city.list.json

[
    {
        "id": 833,
        "name": "Ḩeşār-e Sefīd",
        "state": "",
        "country": "IR",
        "coord": {
            "lon": 47.159401,
            "lat": 34.330502
        }
    },
    {
        "id": 2960,
        "name": "‘Ayn Ḩalāqīm",
        "state": "",
        "country": "SY",
        "coord": {
            "lon": 36.321911,
            "lat": 34.940079
        }
    },
    {
        "id": 3245,
        "name": "Taglag",
        "state": "",
        "country": "IR",
        "coord": {
            "lon": 44.98333,
            "lat": 38.450001
        }
    }
]

試したこと

[city.js]にありますように、api内で(https://api.openweathermap.org/data/2.5/onecall?lat=${city.coord.lat}&lon=${city.coord.lon}&appid=${process.env.API_KEY}&units=metric&exclude=minutely);
とあるのですが、coordが読み込まれていないようです。。。

どなたかご教授いただけると幸いです。
よろしくお願い致します。

Answer 1

[city].jsを読んでみて、getCityの実装に違和感があります。

const getCity = param => {
    // 略
    const city = cities.find((city) => city.id.toString() == id)
    if(!city) {
        return city
    } else {
        return null
    };
};

cities.find()でIDが一致しているものを拾い上げているのですが、その先のifで!cityで判定しているため、cityが存在しない(undefined)ならcity(undefined)を返し・逆にcityが存在するならnullを返す実装になっているように読めます。
returnが逆に思えます。

Comments

[ryo666-6]

修正し起動してみたところ、うまく動きました。
なんとなく合っているだろう、と思わずどんなコードも注視したいと思います。
ご教授いただきありがとうございました。