Как отобразить данные в браузере?

avatar
Coder303
8 августа 2021 в 16:53
73
1
0

Я пытаюсь отобразить информацию в rest API, я получаю запрос очень хорошо, но когда я пытаюсь отобразить данные в JSX, ничего не появляется.

Это файл, в котором я делаю запрос:

import { useEffect } from "react";
import ShowcaseMap from "./ShowcaseMap";

const Showcase = () => {
  const results = [];

  useEffect(() => {

    const getProducts = () => {
        fetch(
          "https://kohls.p.rapidapi.com/products/list?limit=30&offset=1",
          {
            method: "GET",
            headers: {
              "x-rapidapi-key": process.env.REACT_APP_SECRET,
              "x-rapidapi-host": "kohls.p.rapidapi.com",
            },
          }
        )
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error))
      };
    getProducts();
  }, []);
  return (
    <ul>
      {results.map((result) => (
        <li>
            <ShowcaseMap
                key={result.webId}
                productTitle={result.productTitle}
            />
        </li>
      ))}
    </ul>
  );
};

export default Showcase;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

И это файл, который возвращает JSX:

const ShowcaseMap = ({productTitle}) => {
    return (
        <div>
            <h1>{productTitle}</h1>
        </div>
    )
}

export default ShowcaseMap
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Когда я делаю запрос, я хочу вернуть список в браузере, но ничего не появляется.

Источник

Ответы (1)

avatar
Chan Youn
8 августа 2021 в 17:30
-1

Вы не обновляете значение results.

Когда вы устанавливаете const results = [];, это значение results остается неизменным в течение всего времени даже после выполнения вызова выборки, поскольку вы никогда не обновляете его.

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

import { useEffect, useState } from "react"; // <-- import useState
// ... other imports

const Showcase = () => {
  const [results, setResults ] = useState([]); // <-- use `useState` here

// ... rest of React component

Это позволяет вам обновлять состояние результатов таким образом, чтобы вызвать повторную визуализацию ваших компонентов.

Теперь вам нужно сделать setResults где-то в конце строки, иначе результаты никогда не будут обновляться новыми значениями. Это было бы, когда ваше обещание разрешается в вашей функции getProducts со значениями data:

    const getProducts = () => {
        fetch(/* ...fetch arguments ...*/)
        .then(/* ...first .then function */)
        .then(data => {
           console.log(data);
           setResults(data); // <-- call `setResults` to set the value contained in `data` to your `results` state
         })

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

Вот как будет выглядеть полный код на случай возникновения путаницы:

import { useEffect, useState } from "react";
import ShowcaseMap from "./ShowcaseMap";

const Showcase = () => {
  const [results, setResults] = useState([]);
  
  useEffect(() => {
    const getProducts = () => {
        fetch(
          "https://kohls.p.rapidapi.com/products/list?limit=30&offset=1",
          {
            method: "GET",
            headers: {
              "x-rapidapi-key": process.env.REACT_APP_SECRET,
              "x-rapidapi-host": "kohls.p.rapidapi.com",
            },
          }
        )
        .then(response => response.json())
        .then(data => setResults(data))
        .catch(error => console.error(error))
      };
    getProducts();
  }, []);
  return (
    <ul>
      {results.map((result) => (
        <li>
            <ShowcaseMap
                key={result.webId}
                productTitle={result.productTitle}
            />
        </li>
      ))}
    </ul>
  );
};

export default Showcase;

Quentin
8 августа 2021 в 17:33
0

«функциональный компонент» — не функциональный компонент; у него есть состояние, поэтому у него есть побочные эффекты, поэтому он не функционален. Это функциональный компонент.

Chan Youn
8 августа 2021 в 17:47
0

@ Квентин технически ты прав. Спасибо за исправление. Что касается терминологии, большая часть сообщества называет их «функциональными компонентами» из статей, которые я читал, поэтому я использую разговорный термин, который используется в других местах. Но да, технически вы правы, это не «функционально» по праву «функционального программирования». Но это не меняет естественного языка, который развился в сообществе.