Блог

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

 import { Card, Row, Col, Input, Typography } from 'antd'
import React from 'react'
import { Link } from 'react-router-dom'
import { useGetCryptosQuery } from '../services/CryptoApi'
import { useState, useEffect } from 'react'
import millify from 'millify'
import { filter } from 'htmlparser2/node_modules/domutils'

const Cryptocurrencies = ( props ) => {
    const count = props.simplified ? 10 : 100;
    const { data: cryptoList, isFetching } = useGetCryptosQuery( count )
    const [cryptos, setCryptos] = useState( cryptoList?.data?.coins )
    const [searchTerm, setSearchTerm] = useState( '' )

    useEffect( () => {

        const filteredData = cryptoList?.data?.coins.filter( ( coin ) => { coin.name.toLowerCase().includes( searchTerm.toLowerCase() ) } )

        setCryptos( filteredData )
    }, [searchTerm, cryptoList] )

    console.log( cryptos )

    if ( isFetching ) {
        return "loading...";
    }



    return (
        <div>
            {
                <>
                    <div>
                        <Input placeholder="Search Cryptocurrency" onChange={( e ) => setSearchTerm( e.target.value )} className="" />
                    </div>
                    <Row gutter={[32, 32]} className="crypto-card-container">

                        {cryptos?.map( ( currency ) => {

                            return (
                                <Col xs={24} sm={12} lg={6} className="crypto-card" key={currency.id}>
                                    <Link to={`/ crypto / ${currency.id} `}>
                                        <Card
                                            title={`${currency.rank}.${currency.name} `}
                                            extra={<img className="crypto-image" src={currency.iconUrl} />}
                                            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>
                </>
            }
        </div>
    )
}

export default Cryptocurrencies
 

Просто можно добавить условный if оператор для решения проблемы.

Давайте взглянем на то useEffect , как вы описали в компоненте, который монтировался, searchTerm это все еще пустая строка. Путем добавления простого if оператора для проверки seatchTerm значения, filteredData и setCryptos методы работают только тогда, когда searchTerm содержит строку минимум из одной буквы.

 useEffect( () => {
  if(searchTerm.length > 0) {
    const filteredData = cryptoList?.data?.coins.filter((coin) => { coin.name.toLowerCase().includes(searchTerm.toLowerCase())})
    setCryptos(filteredData)
  }
 }, [searchTerm, cryptoList] )