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

状态更新是异步的。您正在设置状态setLimit(num)，并在下一行尝试访问最新值dispatch(loadFetchedData(isLimit))。但是，isLimit仍将具有先前的值。

解决方案-您只需将num传递给loadFetchedData而不是isLlimit

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

需要两次点击才能触发反应

1 个答案: