FireMonkey92 Ответов: 0

Предупреждение об утечке памяти в функциональном компоненте

Привет, я получаю предупреждающее сообщение о своем функциональном компоненте react.
Предупреждение : 
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function



Ниже приведен мой функциональный компонент
import React, { useState, useEffect } from 'react';
import { ErrorMessage } from "formik";
import _ from 'lodash'
import { Input } from "antd";
import './custom-input.less';

const InputSearchFilter = (props) => {
    const { placeholder, loading, arrayToFilter, value, name, onChange, onBlur, touched, 
          label, row, err, disabled } = props;

    const [valueObject, setValueObject] = useState({ medicalSchool: null, 
                                                        medicalSchoolId: null });
    const [showList, setShowList] = useState(false);
    const [filteredList, setFilteredList] = useState([]);

    return (
        <div className="input__wrap InputSearchFilter">
            {!(err && touched) ? label !== undefined && <div className="input__label"> 
            {label}</div> : ""}
            <ErrorMessage name={name}>
                {errorMessage => <div className="input__error">{errorMessage}</div>}
            </ErrorMessage>
            <Input.Search
                rows={row}
                disabled={disabled}
                name={name}
                allowClear
                value={valueObject.medicalSchool && valueObject.medicalSchool}
                placeholder={placeholder}
                onChange={onChangeText}
                onBlur={(ev) => {
                    onBlur(ev)
                    setTimeout(() => {
                        setShowList(false)
                    }, 1000, [setShowList]);
                }}
                autoComplete="off"
                loading={loading}
            />
            {showList && filteredList.length > 0 ?
                <div className="listContainer">
                    {filteredList.map((item, index) => {
                        return (
                            <div style={{ display: 'contents' }} key={item.value} 
                                 onClick={(e) => {
                                // e.stopPropagation();
                                // e.preventDefault();
                                handleSelectListItem(item)
                            }}>
                                <div className="list-item" >
                                    {item.label}
                                </div>
                                {index - 1 < filteredList.length - 2 ? <span 
                                               className='list-seperator' /> : null}
                            </div>
                        )
                    })}
                </div>
                : null}
        </div >
    );
}

export default InputSearchFilter;


Что я уже пробовал:

этот компонент я использовал в форме formik внутри ящика. этот ящик закрывается, когда я щелкаю снаружи.

Я попытался удалить функцию onBlur, а затем она отключает предупреждение,
onBlur={(ev) => {
                   onBlur(ev)
                   setTimeout(() => {
                       setShowList(false)
                   }, 1000, [setShowList]);
               }}


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

0 Ответов