Блог

Главная - Вопросы по программированию - Доступ к объекту в объекте в реакции

Доступ к объекту в объекте в реакции

#javascript #reactjs #object

#javascript #reactjs #объект

Вопрос:

Здравствуйте, у меня есть выборка данных объекта из объекта

Данные

     {
  "test1": {
    "success": true,
    "mmr": 1627,
    "name": "Choo",
    "next_claim": 1639454954
  },
  "test2": {
    "success": true,
    "mmr": 1246,
    "name": "Dee",
    "next_claim": 1639454934
  },
  "test3": {
    "success": true,
    "mmr": 1066,
    "name": "Boo",
    "next_claim": 1639454964
  }
}

Кажется, я не могу показать их на странице

пробовал использовать

 import React, { useState, useEffect } from "react"
import Axios from "axios"

const Axie = () => {
  const [axieStats, setAxieStats] = useState({})

  const fetchAxie = async () => {
    const response = await Axios(
      "https://game-api.axie.technology/api/v1/ronin:0d771f9d749fe72671526e0a52ecdfc11f73ca7b,ronin:b9603b5ae4d10fce072432d99de572c1eb66b43e"
    )
    setAxieStats(response.data)
  }

  console.log(axieStats)
  useEffect(() => {
    fetchAxie()
  }, [])
  return <div></div>
}

export default Axie

похоже, не работает

Я отредактировал вопрос для всего кода, из которого я извлекаю API.

Комментарии:

1. Устанавливаете ли вы значение с помощью этого setTest метода? Кроме того, помните, что сначала, когда это пустой объект, test.test2 выдаст ошибку

2. Не возражали бы вы, если бы могли создать песочницу, где вы могли бы показывать полный код. Если вам нравится, вы можете использовать codesandbox.io . Это позволит легче понять, в чем именно заключается проблема.

3. отредактировал вопрос @Woohaik

4. Попробуйте: <div>{JSON.stringify(axieStats)}</div> чтобы увидеть, есть ли изменения в объекте

5. тем не менее, вы можете попробовать открыть ссылку в своей вкладке, чтобы увидеть результат @Woohaik

Ответ №1:

useState Перехват, как видно из вашего кода, сначала инициализируется пустым объектом, который не является желаемым объектом, который вы хотите использовать в первую очередь. Когда вы пытаетесь получить доступ test2.mmr к пустому объекту test , он не найдет этот объект и выдаст исключение с нулевой ссылкой. Вот некоторые вещи, которые вы можете сделать, чтобы достичь нужного вам состояния:

  • Убедитесь, что вы устанавливаете данные с помощью setTest функции где-нибудь в своем коде.
  • Если данные не существуют локально (что является обычным явлением), то вызов для извлечения данных является асинхронным, и у вас должен быть async-await механизм для обработки обновления переменных состояния для зависимых компонентов.
Метки: