Unable to clear cache and make another API call based on another dropdown in Class Component.

Are you submitting a bug report or a feature request or a question?

Question

Hi,

My use case here is depending upon contentTypeDropdown, I should display the options by search in react-select-async-paginate by making an API call. So whenever I change contentTypeDropdown value the cache should be cleared and make an API call to get records of the selected contentTypeDropdown value.

Thanks.

What is the current behavior?

Unable to clear the cache and unable to make API call after a change in contentTypeDropdown.

What is the expected behavior?

The cache should be cleared and make an API call to display options.

Code

` import React, { Component } from ‘react’; import { Nav, Form } from ‘react-bootstrap’; import { AsyncPaginate } from ‘react-select-async-paginate’;

    class SearchBoxDropDown extends Component {
    constructor(props) {
            super(props);
            this.state = {
            content_type: '3',
            value: {},
            };
    }

    handleContentTypeChange = (e) => {
            this.setState({ content_type: e.target.value });
    }

    handleChange = (value) => {
            this.setState({ value });
    }

    loadOptions = async (search, prevOptions) => {
            const { content_type } = this.state;
            const { contentTypeDropdown, globalSearch } = this.props;

            let filteredOptions = [];
            let hasMore = false;
            // Example of contentTypeDropdown
            // contentTypeDropdown = [{ id: 1, model: 'apple' }, { id: 2, model: 'banana' }, { id: 3, model: 'cherry' },
            //     { id: 4, model: 'pineapple' }, { id: 5, model: 'guava' }, { id: 6, model: 'mango' },
            //     { id: 7, model: 'kiwi' }, { id: 8, model: 'coconut' }];

            if (search) {
            const type = contentTypeDropdown.filter(item => item.id === content_type)[0].model;

            // globalSearch is a function that makes an API call and fetches data.
            // response.next has the value null if there are no records load.

            await globalSearch(type, search, prevOptions.length).then((response) => {
                    filteredOptions = response.results.map(item => ({ value: item.id, label: item.name }));
                    hasMore = response.next !== null;
            });
            }

            return {
            options: filteredOptions,
            hasMore,
            };
    }

    render() {
            const { contentTypeDropdown } = this.props;
            const { content_type, value } = this.state;

            return (
            <>
                    <Nav.Item as="li" style={{ display: 'flex'}}>
                    <Form.Control
                            as="select"
                            name="content_type"
                            className="ff-Arial rounded-0"
                            style={{ backgroundColor: '#50b8e4', color: 'white' }}
                            value={content_type}
                            onChange={this.handleContentTypeChange}
                    >
                            {contentTypeDropdown.map(val => <option style={{ backgroundColor: 'white', color: 'black' }} key={val.id} value={val.id}>{val.model}</option>)}
                    </Form.Control>
                    </Nav.Item>
                    <Nav.Item as="li" style={{ width: '49%', marginTop: '15px' }}>
                    <AsyncPaginate
                            value={value}
                            loadOptions={this.loadOptions}
                            onChange={this.handleChange}
                            defaultOptions
                            cacheUniqs={[content_type]}
                    />
                    </Nav.Item>
            </>
            );
    }
    }

    export default SearchBoxDropDown;

What’s your environment?

“react”: “^16.8.6”, “react-select”: “^3.1.0”, “react-select-async-paginate”: “^0.4.0-alpha.1”,

Issue Analytics

State:
Created 3 years ago
Comments:6

Top GitHub Comments

3reactions

kaushikkurapaticommented, Apr 23, 2021

I fixed it. Sorry for the inconvenience. Thanks

dude how did you fixed it ?

I added another state variable “clearCache” to cacheUniqs prop like this —> cacheUniqs={[content_type, clearCache]} and changed the value of “clearCache” whenever I open the dropdown using “onMenuOpen” prop.

1reaction

Dhenysoncommented, Aug 2, 2022

Can you please share with us the solved problem!

A “cacheUniqs” prop receives an array of states to get a specific cache. But depending on the state, the component will not always notice this change, that’s why Kaushikkurapati created an auxiliary state.

But in general all you need to do is create a state for a specific type of cache. For example: I have two “dropdown selects”, the first chooses the type (seller or customer) and the second lists the options.

...
    const [type, setType] = useState({ value: 'seller', label: t('seller') });
    const [receiver, setReceiver] = useState({});
...

The first “select” changes the type of the second, something like this:

<SingleSelect
    value={type}
    options={[
        { value: 'seller', label: t('seller') },
        { value: 'customer', label: t('customer') }
    ]}
    onChange={setType}
/>

And in the “select async” I set to clear the cache whenever the “type” changes, like this:

<AsyncPaginate
    value={receiver}
    onChange={setReceiver}
    loadOptions={ loadSellerOptions}
    additional={{
        page: 1,
    }}
    cacheUniqs={[ type ]}
/>