تغییر سلکت باکس انت دیزاین

سلام
چرا فک میکنید سرچ درست کار نمیکنه؟
برای مشکل دوم باید کد هاتون رو کامل بزارین

با فتچ مشکل دوم رو ندارین؟

چون با کد خود antd هم وقتی از axios استفاده میکنم جواب نمیده. آقای داور ممنون میشم کد خود antd رو بگین چجوری با axios باید نوشت
@kamran.davar

import { Select, Spin } from 'antd';
import debounce from 'lodash/debounce';
import React from 'react';

const { Option } = Select;

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.lastFetchId = 0;
        this.fetchUser = debounce(this.fetchUser, 800);
    }

    state = {
        data: [],
        value: [],
        fetching: false,
    };

    fetchUser = value => {
        console.log('fetching user', value);
        this.lastFetchId += 1;
        const fetchId = this.lastFetchId;
        this.setState({ data: [], fetching: true });
        fetch('https://randomuser.me/api/?results=5')
            .then(response => response.json())
            .then(body => {
                if (fetchId !== this.lastFetchId) {
                    // for fetch callback order
                    return;
                }
                const data = body.results.map(user => ({
                    text: `${user.name.first} ${user.name.last}`,
                    value: user.login.username,
                }));
                this.setState({ data, fetching: false });
            });
    };

    handleChange = value => {
        this.setState({
            value,
            data: [],
            fetching: false,
        });
    };

    render() {
        const { fetching, data, value } = this.state;
        return (
            <Select
                mode="multiple"
                labelInValue
                value={value}
                placeholder="Select users"
                notFoundContent={fetching ? <Spin size="small" /> : null}
                filterOption={false}
                onSearch={this.fetchUser}
                onChange={this.handleChange}
                style={{ width: '100%' }}
            >
                {data.map(d => (
                    <Option key={d.value}>{d.text}</Option>
                ))}
            </Select>
        );
    }
}

export default Test;

@kamran.davar
با axios که مینویسمش همین کد خودشو. ولی باز همون دو تا مشکل رو داره. یک اینکه فکر نمیکنم سرچش کار کنه. دو اینکه همون موقع که سلکت بازه ریزالتو نمیده یه بار خودشو میبنده و بار بعد که سلکت رو باز میکنی ریزالت رو میده در حالی که این حالت با fetch که خودش کد زده اتفاق نمی افته.. ممنون میشم کمک کنید

 fetchUser = value => {
        console.log('fetching user', value);
        this.lastFetchId += 1;
        const fetchId = this.lastFetchId;
        this.setState({ data: [], fetching: true });
        // fetch('https://randomuser.me/api/?results=5')
        //     .then(response => response.json())
        //     .then(body => {
        //         if (fetchId !== this.lastFetchId) {
        //             // for fetch callback order
        //             return;
        //         }
        //         const data = body.results.map(user => ({
        //             text: `${user.name.first} ${user.name.last}`,
        //             value: user.login.username,
        //         }));
        //         this.setState({ data, fetching: false });
        //     });

        axios.get('https://randomuser.me/api/?results=5').then((response)=>{
            debugger
            if (fetchId !== this.lastFetchId) {
                            // for fetch callback order
                            return;
                        }
                        const data = response.data.results.map(user => ({
                                        text: `${user.name.first} ${user.name.last}`,
                                        value: user.login.username,
                                    }));
                                    this.setState({ data, fetching: false });
        })
    };

اینکه سرچش کار نمیکنه به دلیل اینه که بک اندش سرچ رو پشیتیبانی نمیکنه

اما مشکل دوم
من همین کد شما رو کپی کردم تو پزوژه خودم و دیدم که تغییر فتچ به اکسیوس هیچ تفاوتی در نتیجه ندارن
هیچ مشکلی نداشتم
وقتی سلکت بازه درخواست که زده میشه لیست جستوجو میره تو حالت لودینگ و بلافاصله بعد از برگشت جواب درخواست لیست از حالت لودینگ خارج میشه و لیت جدید رو نشون میده. بدون نیاز به کلیک. همه چی درست و دقیقه

این تهمت ها چیه به انت عزیز میزنید :))

@kamran.davar
لیست رو میبنده بعد از اتمام جستجو. و بعد باید لیست رو باز کنی تا نتایج رو ببینی. با همین کدهای بالا.

@hesammousavi
@sinashahoveisi
@kamran.davar
سلام. هنوز برای این مشکل راحی پیدا نکردم.. ممنون میشم کمک کنید. این کد دیفالت خود انت دیزاینه که برای اینه که یه چیزی رو سرچ بکنی توی سلکت باکس و بر اساس اون سرچت api رو کال میکنه و ریزالت رو میگیره. ولی وقتی به جای fetch از axios استفاده میکنم بعد از سرچ سلکت رو میبنده و وقتی سلکت رو باز میکنیم مجدد میتونیم نتایج رو ببینیم

import { Select, Spin } from 'antd';
import debounce from 'lodash/debounce';
import React from 'react';

const { Option } = Select;

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.lastFetchId = 0;
        this.fetchUser = debounce(this.fetchUser, 800);
    }

    state = {
        data: [],
        value: [],
        fetching: false,
    };

    fetchUser = value => {
        console.log('fetching user', value);
        this.lastFetchId += 1;
        const fetchId = this.lastFetchId;
        this.setState({ data: [], fetching: true });
        fetch('https://randomuser.me/api/?results=5')
            .then(response => response.json())
            .then(body => {
                if (fetchId !== this.lastFetchId) {
                    // for fetch callback order
                    return;
                }
                const data = body.results.map(user => ({
                    text: `${user.name.first} ${user.name.last}`,
                    value: user.login.username,
                }));
                this.setState({ data, fetching: false });
            });
    };

    handleChange = value => {
        this.setState({
            value,
            data: [],
            fetching: false,
        });
    };

    render() {
        const { fetching, data, value } = this.state;
        return (
            <Select
                mode="multiple"
                labelInValue
                value={value}
                placeholder="Select users"
                notFoundContent={fetching ? <Spin size="small" /> : null}
                filterOption={false}
                onSearch={this.fetchUser}
                onChange={this.handleChange}
                style={{ width: '100%' }}
            >
                {data.map(d => (
                    <Option key={d.value}>{d.text}</Option>
                ))}
            </Select>
        );
    }
}

export default Test;

عملکردش باید مثل این لینک باشه

لیست رو میبنده بعد از اتمام جستجو. و بعد باید لیست رو باز کنی تا نتایج رو ببینی. با همین کدهای بالا.

من که همین کد های شما رو کپی کردم و اصلا اینطور میگید نبود و همه چی مثل همون لینکه. الانم باز دوباره کپی کردم کد هاتونو و چک کردم باز همه چی درسته.

@kamran.davar دیگه پروژه رو عوض کردم و تست گرفتم درس کار کرد.. واقعا نمیفهمم چی تو پروژه ای که میخوام توش این کد رو بزنم هست که این مشکل بوجود میاد. دقیقا کدها باز مثل بالاس

لعنت بر سی اس اس

احتمالا یکجایی از سی اس اس هاتون از این استفاده شده:

!important

@kamran.davar بله استفاده شده. از این میتونه باشه؟

آره. این کد توی هر خطی که باشه اون خط کد در اولویت اول قرار داره و شما حتی اگر inline css هم بنویسید باز اعمال نمیشه. یعنی میگه هر چی کد سی اس اس هر جای پروژه بود هیچ هیچ اهمیتی نداره فقط همین خط کد رو اعمال کن.