JS React — Как достать ключ из api объекта?

Question

[poles1469]

const course = {}
  let [currency, setCurrency] = React.useState({})
  useEffect(() => {
    fetch('https://www.cbr-xml-daily.ru/daily_json.js')
    .then(response => response.json())
    .then(json => setCurrency(json.Valute))
    .catch(e => console.error(e))
  }, [])

Получаю данные с api, а именно курсы валют, сейчас в стейте [currency] - валюты.

console.log(currency.USD) - выводит в консоль:

{
CharCode: "USD"
ID:"R01235"
Name:"Доллар США"
Nominal:1
NumCode:"840"
Previous:64.6078
Value:66.3474
}

Я хочу получить ключ "Value", с объекта currency.USD. Пишу console.log(currency.USD.Value), но в консоль выдается ошибка:

App.js:25 Uncaught TypeError: Cannot read properties of undefined (reading 'Value')
at App (App.js:25:1)
at renderWithHooks (react-dom.development.js:16175:1)
at mountIndeterminateComponent (react-dom.development.js:20913:1)
at beginWork (react-dom.development.js:22416:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
at invokeGuardedCallback (react-dom.development.js:4274:1)
at beginWork$1 (react-dom.development.js:27405:1)
at performUnitOfWork (react-dom.development.js:26513:1)
at workLoopSync (react-dom.development.js:26422:1)

Почему?

*Что интересно, если вместо ".then(json => setCurrency(json.Valute))", написать ".then(json => setCurrency(json.Valute.USD.Value)) и если вывести в консоль стейт currency - то он нам выдает нужный ключ и его значение, а именно 66.3474
Без ошибок.

Comments

[Вадим]

Я хочу получить ключ "Value", с объекта currency.USD. Пишу console.log(currency.USD.Value), но в консоль выдается ошибка:

Показывать где Вы это делаете, конечно же, не надо.

Так что членство в ванга клубе позволяет мне выдать Вам такой ответ: запрос ещё не зарезолвился. Стэйт пустой. Вот Вам и ошибка.

И тут Вы спросите, а почему тогда работает .then(json => setCurrency(json.Valute.USD.Value)) - ответ потому что. В консоле объект по ссылке показывается. Пока Вы её открыли и посмотрели, он уже заполнился.

Что делать? Перестроить своё мышление на асинхронное и делать всё что нужно в .then цепочке.
Либо освоить async\await.

[poles1469]

Вадим,
"он уже заполнился" - это как понимать?

[Вадим]

poles1469, Завершился запрос, отработала функция setState, установила значение в state. Какие ещё были варианты?

Answer 1

[bqio]

const [currency, setCurrency] = React.useState({});

const fetchCurrency = async () => {
  const resp = await fetch('https://www.cbr-xml-daily.ru/daily_json.js');
  const json = await resp.json();
  setCurrency(json.Valute.USD.Value);
}

useEffect(() => {
  fetchCurrency();
}, []);