Javascript 我应该什么时候在“家长”中输入状态？

这是我的第一个StackOverflow问题，请随意添加任何建议

我有一个AudioControls组件，它呈现四个不同的控件组件，每个组件用于不同的音频选项（音量、低音、中音、高音）。 我写这封信的方式让家长了解并管理四个州： 使用状态({ 卷:50， 巴斯：50， 年中：50， 高音：50， }) 然后将这些值作为道具传递给孩子们

我对此有两个担忧：

控件组件完全相同，可能它们有自己的值状态（在每个控件上放置audioValue状态）。我读过，在可能的情况下，总是提升状态是一个很好的实践，但为什么需要呢？有什么好的理由这样做

鉴于这些控件都非常相似，有没有一种方法可以将map函数用于这些控件？当然，在不丢失易读性的情况下

这是音频控制代码：

function AudioControls() {
const [audioValues, setAudioValues] = useState({
    volume: 50,
    bass: 50,
    mid: 50,
    treble: 50
})

function handleControl(option, id) {
    const oldValue = audioValues[id]
    const newValue = option === "+" ? oldValue + 1 : oldValue - 1
    
    setAudioValues(prevState => (
        {
            ...prevState,
            [`${id}`] : newValue
        }
    ))
}

return(
    <>
        <Control
            id="volume"
            name="Volume"
            value={audioValues.volume}
            handleControl={handleControl}
        />
        <Control
            id="bass"
            name="Bass"
            value={audioValues.bass}
            handleControl={handleControl}
        />
        <Control
            id="mid"
            name="Mid"
            value={audioValues.mid}
            handleControl={handleControl}
        />
        <Control
            id="treble"
            name="Treble"
            value={audioValues.treble}
            handleControl={handleControl}
        />
    </>
   )
}

函数AudioControls（）{
常量[audioValues，setAudioValues]=useState({
卷:50，
巴斯：50，
年中：50，
高音：50
})
功能手柄控制（选项，id）{
const oldValue=音频值[id]
const newValue=option==“+”？oldValue+1:oldValue-1
设置音频值（prevState=>(
{
…国家，
[`${id}`]：newValue
}
))
}
返回(
)
}

这是控制组件：

function Control({ id, name, value, handleControl }) {
    return(
        <div>
            <button onClick={() => handleControl("+", id)}>
                +
            </button>
            <label>{name}: {value}</label>
            <button onClick={() => handleControl("-", id)}>
                -
            </button>
        </div>
    )
}

函数控件（{id，name，value，handleControl}）{
返回(
handleControl（“+”，id）}>
+
{name}:{value}
handleControl（“-”，id）}>
-
)
}

这是我的第二个堆栈溢出答案。也欢迎任何和所有反馈

我很想知道你从哪里听说过这样一个事实：提升状态总是一个好主意。我的想法是：如果提升状态总是一个好主意，那么什么时候停止提升？在这种情况下，为什么只将状态向上移动一个？为什么不进一步提高呢

回答第一个问题：将状态提升到父组件中的主要原因是您是否需要两个同级组件使用同一个状态。例如：

const [volume, setVolume] = setState(50);

function changeVolume (newVolume) {
  setVolume(newVolume);
}

<VolumeDisplay volume={volume} />
<VolumeControl onChange={changeVolume} />

const[volume，setVolume]=setState（50）；
函数changeVolume（newVolume）{
设置音量（新音量）；
}

在您的情况下，看起来每个都可以更改自己的状态，因此最好将状态下推到每个

。一旦您将音频值本地放入控制组件中，您就可以像这样轻松地映射它们：

const controls = [
  {id: "bass", name: "Bass"},
  {id: "volume", name: "Volume"},
  {id: "mid", name: "Mid"},
  {id: "treble", name: "Treble"},
]

return (
  <>
    {controls.map(({id, name}) => <Control id={id} name={name} />)}
  <>
)

const控件=[
{id:“bass”，name:“bass”}，
{id:“卷”，名称：“卷”}，
{id:“mid”，name:“mid”}，
{id:“高音”，名称：“高音”}，
]
返回(
{controls.map（（{id，name}）=>）}
)

谢谢！这样代码看起来更干净。我正在使用一本叫做“纯反应”的书来学习React，在某些方面，它说让组件保持无状态总是更好的，这样它们更容易维护。它使用了一个侧边栏的例子，并声称如果需要隐藏它，则应该提升“显示/隐藏”状态，这样它内部就不知道它是否可见，是否只是被渲染（优点是，如果您有多个侧栏，并且需要（比如）将它们的状态保存在本地存储中，则不需要另外一种方法来区分它们）。但我可能把它们都混在一起了：/