小编Zoh*_*lak的帖子

现在有了 React 钩子，我们可以在功能组件中拥有状态，所以我尝试重写我之前使用类组件编写的一个小项目，在这个过程中我遇到了一个我可能有解释但我想确定的问题。

简要概述

因此，在我的App.js组件中，我获取数据，然后将其作为道具传递给按步骤呈现数据的列表组件，首先它显示 4 个项目，然后在滚动时添加更多项目。

我这样做的方式是，api 给了我一个包含 30 个项目的数组，我将所有这些都传递给一个list组件，在那里我有一个底层数组，我不断从项目中提取并更新状态以便呈现。

示例代码

class List extends Component {
    constructor() {
        super();
        this.underlyingArray = [];
        this.state = {
            visibleList: []
        }
    }
    componentDidUpdate() {
        // checks if we have data 
        // populates the underlyingArray only if it's empy
    }

    render() {
        return this.state.visibleList
    }
}

在构造函数中，我将其初始化underlyingArray为空，然后在有数据时填充它。

现在，当我尝试将所有这些转换为功能组件时，underlying array每次状态更改时都会被清除或初始化

示例代码

const List = (props) => {
    let underlyingArray = [];
    let [visibleList, setVisibleList] = useState([]) …

我有一个 HTML 元素，position: fixed在第二个元素中带有一个overflow-y :auto

当鼠标悬停在固定元素上时，滚动不会冒泡到它的父元素。移开时，会发生滚动。

我已将情况简化为下面的代码

main {
  /* I am the element that scrolls */
  height: 200px;
  display: flex;
  flex-flow: row nowrap;
  overflow-y: auto;
}

main section {
  flex: 1 1 800px;
  max-width: 800px;
}

main nav {
  flex: 1 1 auto;
  min-width: 100px;
}

main nav a {
  /* I am the element that prevent scroll on when hovering */
  position: fixed;
}

<main>
  <aside>
    <nav>
      <a href="#">left</a>
    </nav>
  </aside>
  <section>
    <p>Could be a …

我有 CF7 WP 插件。

我将接受短代码 [acceptance Acceptance-524] 和解释文本放在后面。

我已经尝试了几种 CSS 解决方案，但我无法避免第一行的行高较高以及第一行下方的行返回

问题截图如下：