我什么时候应该把 state 放在 parent 中?

服务0

这是我的第一个 StackOverflow 问题,请随意添加您想要的任何建议。

我有一个 AudioControls 组件,它呈现四个不同的 Controls 组件,每个组件用于不同的音频选项(音量、低音、中音、高音)。我写的方式让父母知道并管理四种状态:useState({ volume: 50, bass: 50, mid: 50, treble: 50, }) 然后将这些值作为道具传递给孩子们。

对此,我有两个顾虑:

  1. 控件组件完全相同,也许它们可以有自己的值状态(在每个控件上放置一个 audioValue 状态)。我读过在可能的情况下总是解除状态是一个很好的做法,但为什么需要它?这样做的充分理由是什么?

  2. 鉴于它们都非常相似,有没有办法将地图功能与这些控件一起使用?当然,不会失去易读性。

这是音频控制代码:

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>
    )
}
贾斯汀T。

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

我很想知道你从哪里听说的这样一个事实,即提升状态总是一个好主意。我的想法是:如果提升状态总是一个好主意,你什么时候停止提升?在这种情况下,为什么只将 state 上移一个?为什么不进一步提升它?

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

什么时候应该在我的Yii模型中调用parent :: beforeDelete()

什么时候知道何时应该将参数放在主体中?

是否应将此逻辑放在Vuex商店中?我很难弄清楚什么时候应该存储或处于本地组件状态

当我们将 $ 放在 bash shell 中的变量之前 - 什么时候不?

什么时候将routerLink放在方括号中?

我什么时候应该在StratifiedKFold中洗牌

关于设计课程系统。我什么时候应该检查作业的到期时间?我应该把这个逻辑放在哪里?

我为state创建了通用的reducer,什么时候应该使用它,什么时候不应该使用它

什么时候应该同步,什么时候应该在Android Studio中构建/重建项目,我可以使其自动化?

java中什么时候应该使用return方法,什么时候应该使用void方法

我应该将密钥放在Flask中的什么位置?

我应该将 <p> 标签放在 <section> 中的什么位置?

我应该什么时候使用 Fragment 中的 getActivity() 和 getContext()?

我什么时候应该在 Robot 测试框架中为变量使用引号

什么时候我们应该在 android 中创建新的布局

熊猫中的for循环真的不好吗?我什么时候应该在意?

我们什么时候应该使用Java中抛出关键字?

我什么时候应该直接在 Angular 应用程序中 DI 注入器?

在 JOOQ 中,我应该什么时候使用 Configuration.dsl() 与 DSL.using(Configuration)?

我什么时候应该使用?? (空合并)与|| (逻辑或)在JavaScript中?

在Java中,什么时候我应该更喜欢String而不是StringBuilder?

我们什么时候应该在方法中抛出异常或捕获异常?

[Python]我们什么时候应该把变量中的所有字母都大写?

我什么时候应该在 javascript 中的 require('module') 之后使用点 (.)

我应该什么时候关闭 JSF Web 应用程序中的 HIbernate 会话工厂?

什么时候应该使用href代替Angular中的routerLink?

什么时候应该在python中引发LookupError?

在Python中,什么时候应该使用函数而不是方法?

在Python中,什么时候应该使用函数而不是方法?