Параметры отправки запроса Redux Toolkit RTK Query возвращаются неопределенными

Как вы передаете параметры запроса в API с помощью Redux Toolkit RTK Query, не делая его неопределенным?

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

const cryptoApiHeaders = {
  "X-RapidAPI-Host": "...",
  "X-RapidAPI-Key": "...",
};

const baseUrl = "...";

const createRequest = (url) => ({ url, headers: cryptoApiHeaders });

export const cryptoApi = createApi({
  reducerPath: "cryptoApi",
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getCryptos: builder.query({
      query: (name) => createRequest(`/coins?limit=${name}`),
    }),
  }),
});

export const { useGetCryptosQuery } = cryptoApi;

Когда я передаю параметр вниз от компонента, он либо не проходит, либо, похоже, не распознает его, потому что он всегда показывает неопределенное https://.../coins?limit=undefined. Я действительно не знаю, что я делаю неправильно.

import React, { useState } from "react";
import millify from "millify";
import { Link } from "react-router-dom";
import { Card, Row, Col, Input } from "antd";

import { useGetCryptosQuery } from "../services/cryptoApi";

const Cryptocurrencies = () => {
  const count = 10;
  const { data: cryptosList, isFetching } = useGetCryptosQuery(count);
  const [cryptos, setCryptos] = useState(cryptosList?.data?.coins);

  return (
    <>
      <Row gutter = {[32, 32]} className = "crypto-card-container">
        {cryptos.map((currency) => (
          <Col xs = {24} sm = {12} lg = {6} className = "crypto-card" key = {currency.id}>
            <Link to = {`/crypto/${currency.uuid}`}>
              <Card
                extra = {
                  <img
                    className = "crypto-image"
                    src = {currency.iconUrl}
                    alt = {`${currency} currency`}
                  />
                }
                title = {`${currency.rank}. ${currency.name}`}
                hoverable
              >
                <p>Price: {millify(currency.price)}</p>
                <p>Market Cap: {millify(currency.marketCap)}</p>
                <p>Daily Change: {millify(currency.change)}%</p>
              </Card>
            </Link>
          </Col>
        ))}
      </Row>
    </>
  );
};

export default Cryptocurrencies;

Я попытался жестко закодировать его, поместив значение непосредственно в запрос, и он отлично работал, не показывая неопределенное.

export const cryptoApi = createApi({
  reducerPath: "cryptoApi",
  baseQuery: fetchBaseQuery({ baseUrl }),
  endpoints: (builder) => ({
    getCryptos: builder.query({
      query: (name = 10) => createRequest(`/coins?limit=${name}`),
    }),
  }),
});

почему я не могу отправить значение из другого компонента

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
69
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что вы инициализируете свое состояние cryptos с помощью undefined при первом рендеринге, и что вызовы useState никогда не обновляются, когда они вызываются с другим initialValue.

Просто убери этот бесполезный useState и уходи

  const { data: cryptosList, isFetching } = useGetCryptosQuery(count);
  const cryptos = cryptosList?.data?.coins;

и все будет работать нормально.

PS: что это за учебник? Я видел довольно много сообщений SO с этой странной (и, честно говоря, довольно бессмысленной) функцией createRequest.

Другие вопросы по теме