Как вы передаете параметры запроса в 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}`),
}),
}),
});
почему я не могу отправить значение из другого компонента





Проблема в том, что вы инициализируете свое состояние cryptos с помощью undefined при первом рендеринге, и что вызовы useState никогда не обновляются, когда они вызываются с другим initialValue.
Просто убери этот бесполезный useState и уходи
const { data: cryptosList, isFetching } = useGetCryptosQuery(count);
const cryptos = cryptosList?.data?.coins;
и все будет работать нормально.
PS: что это за учебник? Я видел довольно много сообщений SO с этой странной (и, честно говоря, довольно бессмысленной) функцией createRequest.