Блог

Главная - Вопросы по программированию - Почему данные не определены из json?

Почему данные не определены из json?

#reactjs #api

#reactjs #API

Вопрос:

Я хочу получить названия коктейлей через api. Я привел данные. Но я не могу прочитать свойства внутри.

Это JSON

 {
  "drinks": [
    {
      "idDrink": "12784",
      "strDrink": "Thai Iced Coffee",
      "strCategory": "Coffee / Tea",
      "strIBA": null,
      "strAlcoholic": "Non alcoholic",
      "strGlass": "Highball glass",
      "strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/rqpypv1441245650.jpg",
      "strIngredient1": "Coffee",
      "strIngredient2": "Sugar",
      "strIngredient3": "Cream",
      "strIngredient4": "Cardamom",
      "strMeasure1": "black",
      "strMeasure3": " podsn",
      "strImageAttribution": null,
      "strCreativeCommonsConfirmed": "No",
      "dateModified": "2015-09-03 03:00:50"
    }
  ]
}

Это useFetch.jsx Этот файл служит для импорта данных.

 import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  async function fetchUrl() {
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  }
  useEffect(() => {
    fetchUrl();
  });
  return [data, loading];
}
export default useFetch;

Это Main.jsx Этот файл отображает данные на экране.

 import React from "react";
import styled from "styled-components";
import useFetch from "./useFetch";

const url = "https://www.thecocktaildb.com/api/json/v1/1/random.php";
const Main = () => {
  const [data, loading] = useFetch(url);
  return (
    <>
      {loading ? (
        "Loading..."
      ) : (
        <ul>
          {[data].map(
            ({ idDrink, strDrink, strAlcoholic, strGlass, strDrinkThumb }) => (
              <Container>
                <img src={`${strDrinkThumb}`} alt="" />
                <li key={`${data.idDrink}`}>{`Drink ${data.strDrink}`}</li>
              </Container>
            )
          )}
        </ul>
      )}
    </>
  );
};
export default Main;
const Container = styled.div``;

Запустите console.log([data]); , и я вижу, что данные поступают хорошо. Но данные в не определены.

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

1. Должно ли это быть data.drinks.map ?

2. Кроме того, если вы разрушаете свою map функцию, вам нужно использовать их таким образом. Например, это было бы <li key={`${idDrink}`}>{`Drink ${strDrink}`}</li>

3. @Nick Результаты все те же.

4. Я подозреваю, что проблема в том, что data это не то, что вы думаете. Я не уверен, зачем вам вводить data новый массив, если информация, которую вы пытаетесь перебрать (появляется), находится в data.drinks .

5. @Nick О, в этом-то и проблема. Спасибо.

Ответ №1:

Основываясь на структуре данных, ваш массив фактически находится в data.drinks . Итак, ваш компонент должен выглядеть следующим образом:

 <ul>
  {data.drinks.map(
    ({ idDrink, strDrink, strAlcoholic, strGlass, strDrinkThumb }) => (
      <Container>
        <img src={`${strDrinkThumb}`} alt="" />
        <li key={`${idDrink}`}>{`Drink ${strDrink}`}</li>
      </Container>
    )
  )}
</ul>;

Также обратите внимание, что, поскольку вы деструктурировали каждый элемент данных, вам нужно будет использовать фактически деструктурированное имя переменной внутри каждого цикла.