Как добавить к переменной данные, полученные из массива JSON, полученный через API?

Question

[stupid_intern31]

Здравствуйте. В React-е я новичок , поэтому сильно не бейте) Хотел добавить к переменной kkey данные, полученные из массива launches, а именно id, для того, чтобы добавить его к ссылке из api и получить от туда другой массив. Но почему-то не получается. Пишет: "Uncaught TypeError: Cannot read properties of null (reading 'launches')".

Еще хотел сделать проверку, на наличие id в массиве launches,так как в других массивах массив launches пустой, из-за чего в консоли куча ошибок.

React

import { useParams, Link } from 'react-router-dom'
import React, { useState, useEffect } from 'react'
import axios from "axios";
//ссылки на API
const link='https://api.spaceflightnewsapi.net/v3/articles/';
const link2='https://api.spaceflightnewsapi.net/v3/articles/launch/';
let linkSwitch2='', linkSwitch='', kkey=null;

const SingleNews = () => {
    const {id} = useParams();
    const [News, setNews] = useState(null);
    const [News2, setNews2] = useState([]);

    //тут я хотел передать переменной kkey id, полученный из массива, но он не видит в нем ничего ( null )
    kkey=News.launches[0].id;
    
    linkSwitch=link+id;
    linkSwitch2=link2+kkey;
    
    //первая ссылка
    const getNews = () => {
        axios.get(linkSwitch)
            .then ((response) => {
                setNews(response.data);
            })
    }
    //вторая ссылка
    const getNews2 = () => {
        axios.get(linkSwitch2)
            .then ((response) => {
                setNews2(response.data);
            })
    }
    useEffect(() => {
        getNews();
        getNews2();
    }, )
    return (
        <div>
            {News && (
            <>
                <h1>{News.title}</h1>
                <h3>{News.newsSite}</h3>
                <h3>{News.summary}</h3>
            </>
        )}
        <div>
            <h2>Похожие новости:</h2>
            <div className="news">
            {News2.map(news2 => {
                return (
                    <div className="news">
                        <h2>{news2.title}</h2>
                        <div className="details">
                            <p>{news2.newsSite}</p>
                            <p>{news2.summary}</p>
                        </div>
                    </div>
                );
            })}
            </div>
        </div>


            <Link to="/about">About Page</Link>
            <br />
            <Link to="/news">News</Link>
        </div>
    )
}

export {SingleNews}

JSON массив

{
   "id": 15474,
   "title": "NASA completes fourth Artemis 1 Wet Dress Rehearsal attempt",
   "url": "https://www.nasaspaceflight.com/2022/06/artemis-1-wdr-4/",
   "imageUrl": "https://www.nasaspaceflight.com/wp-content/uploads/2022/06/DSC_2428.small_-1170x780.jpg",
   "newsSite": "NASA Spaceflight",
   "summary": "NASA got within several seconds of completing its practice launch day exercise June 20 with the Artemis 1 vehicle on the launch pad at the Kennedy Space Center (KSC) in Florida. The fourth Wet Dress Rehearsal (WDR) test attempt got down to T-29 seconds in a single, consolidated run of the countdown’s final ten minutes with the integrated Orion spacecraft and Space Launch System (SLS) rocket for Artemis 1 fully fueled and pressurized like it will be for launch.",
   "publishedAt": "2022-06-20T13:39:07.000Z",
   "updatedAt": "2022-06-21T01:22:41.304Z",
   "featured": false,
   "launches": [
      {
         "id": "65896761-b6ca-4df3-9699-e077a360c52a",
         "provider": "Launch Library 2"
      }
   ],
   "events": [
      {
         "id": 507,
         "provider": "Launch Library 2"
      }
   ]
}

Answer 1

[Дмитрий Тычинин]

const [News, setNews] = useState(null);
Эта строка создает состояние, или переменную, с начальным значением null.
kkey=News.launches[0].id;
Почти сразу же после этого вы пытаетесь получить свойство "launches" из "News", но вы же только что сказали, что "News" - это null. У null не может быть свойств.
Позже в useEffect вы записываете в News данные, но это происходит именно после.
Перенесите строку
kkey=News.launches[0].id;
в такую конструкцию

const [kkey, setKkey] = useState(null);
useEffect(() => {
  if (News !== null) {
    kkey = News.launches[0].id;
  }
}, [News]);

В любом случае, гарантирую, что всплывут другие ошибки. Официальный Getting Started у React в помощь.