小编Dar*_*ll 的帖子

useState 钩子很棒。我主要使用 useState 钩子来初始化某些状态，并将该函数传递给子组件来更改状态。但是，我意识到我开始在父页面组件中使用太多 useState 挂钩。这看起来和感觉都是错误的，因为我开始在父页面组件中拥有大约 6-10 个 useState 挂钩。
在不显示代码的情况下，是否有更好的方法来做到这一点？也许是更好的实践，或者更好的重构方式。
谢谢

在网上看到了几个答案，但没有明确的解释，解决方案也不起作用。所以这就是我想要做的：

• 我有一个包含许多图像（数千张）的文件夹- 目前它保存在src/assets/images文件夹下
• 例如，给定图像列表作为输入，我想动态渲染这些图像。并且不全部导入，因为考虑到疯狂的图像数量这是不可能的

这是我目前的实现方式（不起作用）：

// for example
const imageList = ['img1', 'img2', 'img3' /*...so on */]

const getImagePath = (image) => {
  return `../assets/images/${image}.jpg`
}

function ImagesPage() {
  return (
    <>
      <p>Below should show a list of images</p>
      {imageList.map((img) => {
        return <img src={require(getImagePath(img))} />
      })}
    </>
  )
}

从我在线阅读的内容来看，这与webpack 的工作方式有关，并且只有在将确切的字符串路径输入到以下内容时才会起作用require：

// This works:
<img src={require('../assets/images/img1.jpg')} />

// But all these will not work:
<img …

我目前正在尝试使用Material-UI 的抽屉组件实现一个网站。它有效，当我单击抽屉项目时，它会将我引导到正确的页面。
但是我如何让各个抽屉项目突出显示它所在的当前页面。

例如，如果我位于 /dashboard 页面上，并且仪表板页面的抽屉项目应突出显示（不同的颜色和样式）以指示我当前动态位于该页面上。
尚未设法在网上找到任何好的解决方案，并且 Material-UI 文档也没有演示如何实现这一点，很高兴听到你们都是如何做到的。

我如何缓冲我的请求？

目前我正在我的 React 项目中使用 Material UI 的滑块。当我沿着滑块移动时，我使用 onChange 属性触发 http post 请求。代码看起来像这样。

<Slider
          onChange={handleChange}
          valueLabelFormat={valueLabelFormat}
          //   aria-labelledby="discrete-slider"
          aria-labelledby="non-linear-slider"
          valueLabelDisplay="auto"
          value={value}
          min={1}
          max={5}
          step={0.05}
        />

但是，如果您可以想象，onChange 将会过于频繁，并且会发送过多的 HTTP 请求。这绝对不推荐。我也不打算使用 onChangeCommited，因为它不是我想要的交互方式。

所以这就是我想做的：
如果我沿着滑块（或onChange）移动，onChange将不断更新值，但http请求只会每500ms触发一次（使用onChange更新最新值）。而不是每次onChange都触发一次请求！
我完全不知道如何实现这个...... setInterval 或......？不太确定。帮助将不胜感激。
谢谢你！

更新
答案是使用 debounce （请参阅下面ks的答案）
但是我的用例与通常的用例略有不同。我在去抖动中使用的函数需要输入。我在handleChange()函数中使用debounce，因为我需要handleChange来设置滑块的值（以便它平滑滚动）并在执行http调用的函数上调用debounce。

<Slider
          onChange={handleChange}
          valueLabelFormat={valueLabelFormat}
          //   aria-labelledby="discrete-slider"
          aria-labelledby="non-linear-slider"
          valueLabelDisplay="auto"
          value={value}
          min={1}
          max={5}
          step={0.05}
        />

这就是我的handleChange() 的样子

const boostedLabel ="some label"

const handleChange = (_event, newValue) => {
    //Update value back to Slider
    setValue(newValue);

    const …