我应该什么时候将状态放入 parent？

Question

这是我的第一个 Whosebug 问题，请随时添加您想要的任何建议。

我有一个 AudioControls 组件，它呈现四个不同的控件组件，每个组件用于不同的音频选项（音量、低音、中音、高音）。我以 parent 知道并管理四种状态的方式编写它：使用状态（{ 体积：50，低音：50，中：50，高音：50， }) 然后将这些值作为道具传递给 children。

对此我有两个顾虑：

控件组件完全相同，也许它们可以有自己的值状态（在每个控件上放置一个 audioValue 状态）。我已经读到，在可能的情况下始终解除状态是一种很好的做法，但为什么需要这样做呢？这样做的充分理由是什么？
鉴于这些控件都非常相似，是否有办法将地图功能与这些控件一起使用？当然，在不失去易读性的情况下。

这是音频控制代码：

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}
        />
    </>
   )
}

这里是控制组件：

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

Answer 1

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

我很想知道您是从哪里听说解除状态总是一个好主意的。我的想法是：如果提升状态总是一个好主意，那么什么时候停止提升？ 为什么在这种情况下只将状态提升一个？为什么不进一步提升它？

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

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

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

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

在你的情况下，看起来每个人都能够改变自己的状态，所以最好将状态下推到每个 <Control>。一旦将音频值本地放入控制组件中，就可以像这样轻松映射它们：

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} />)}
  <>
)

我应该什么时候将状态放入 parent？

When should I put state in parent?

javascript

refactoring

reactjs