React点击按钮sliderValues每项+20却+40的问题修复咨询

问题场景 #

需求：点击Increase Volume按钮时，将sliderValues中的每个元素增加20。
初始代码运行后，每个元素实际增加了40（初始值50变为90），期望输出是每个元素为70。

错误原因 #

audios数组包含2个元素，你在increaseVolume里用forEach遍历这个数组，导致setSliderValues被调用了两次。每次调用都会基于当前状态给每个元素加20，两次叠加就变成了加40。实际上更新sliderValues和audios的数量没有关联，完全不需要遍历audios。

修复后的代码 #

import React, { useState } from 'react';

export const App = ({ name }) => {
  const [sliderValues, setSliderValues] = useState([50, 50, 50, 50, 50]); // Initial slider values

  const audios = [
    { src: '/fire.mp3', icon: '\\f06d' },
    { src: '/crickets.mp3', icon: '\\e4d0' },
  ];

  const increaseVolume = () => {
    // 直接更新一次状态即可，无需遍历audios数组
    setSliderValues((prevValues) =>
      prevValues.map((prevValue) => prevValue + 20)
    );
  };

  return (
    <div>
      <button onClick={increaseVolume}>Increase Volume</button>
      {/* Displaying the slider values */}
      <ul>
        {sliderValues.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者wyc