Два щелчка мышки необходимы, чтобы выполнить действие в React

Question

Я создал всплывающее окно с некоторыми параметрами для выбора количества строк в таблице данных с помощью всплывающего окна reactstrap. код выглядит следующим образом:

       <OverlayTrigger
                                trigger="click"
                                rootClose
                                placement='bottom'
                                overlay={
                                    <Popover className="popover-contained" >
                                        <Popover.Content className="popover-content">
                                            {numberOfLinesoptions.map(numberOfLinesoption =>
                                                <div className="option-wrapper" >
                                                    <img src={isLimit === numberOfLinesoption ? blueCircle : blackCircle} />
                                                    <a className={isLimit === numberOfLinesoption ? 'selected' : ''} onClick={() => getLines(numberOfLinesoption)}
                                                    >{numberOfLinesoption} Rows</a>
                                                </div>
                                            )}
                                        </Popover.Content>
                                    </Popover>
                                }
                            >
                                <Dropdown className="btn-group">
                                    <Dropdown.Toggle >
                                        {isLimit} Rows
                                    </Dropdown.Toggle>
                                </Dropdown>
                            </OverlayTrigger>

А вот функция getLines и массив номеров строк:

 function getLines(num) {
        setLimit(num);
        dispatch(loadFetchedData(isLimit)
    }

И вот еще массив номеров строк:

    const numberOfLinesoptions = ["10", "15", "20"];

Как видите, я хочу щелкнуть одну опцию во всплывающем окне, а затем получить определенное количество строк соответственно. Что здесь происходит, так это то, что мне нужно дважды щелкнуть по опции для вызова функции getLines и также изменить значение isLimit (начальное количество страниц). Так почему это происходит и как это исправить?

Заранее спасибо.

Answer 1

Обновления состояния являются асинхронными c. Вы устанавливаете состояние setLimit(num), а в следующей строке пытаетесь получить доступ к последнему значению dispatch(loadFetchedData(isLimit)). Однако isLimit по-прежнему будет иметь предыдущее значение.

Решение - вы можете просто передать num в loadFetchedData вместо isLlimit

function getLines(num) {
  setLimit(num);
  dispatch(loadFetchedData(num));
}