如何在 React 中动态创建状态？

Posted 2023-02-22

【中文标题】如何在 React 中动态创建状态？

【英文标题】：How to dynamically create state in React?

【发布时间】：2018-01-02 14:06:33

【问题描述】：

是否可以在不使用构造函数内部的对象的情况下创建状态？

我需要在组件内部动态创建新状态。有什么建议吗？

【问题讨论】：

我没有得到创建动态状态的目的。您可以在构造函数中有空的状态对象，然后以任何您想要的方式操作组件内的状态对象。您能在这里详细说明您的要求吗？

【参考方案1】：

状态对象实际上只是一个 javascript 对象，因此它已经是动态的。

如果你愿意，你可以随时随地修改它。但这完全打破了 React 为您提供的良好设计模式——数据的单一真实来源，并且不改变任何状态对象为您提供了每个已发生操作的完美历史记录，使调试变得轻而易举。

这就是为什么他们鼓励您创建一个初始状态，然后使用 setState，它只是在修改您指定的字段时创建一个新副本。

跳到“正确使用状态”：https://facebook.github.io/react/docs/state-and-lifecycle.html

如果您需要“动态创建新状态”，是否有任何理由不能在构造函数中使用初始值定义这些状态，无论您是否使用它们？我看不出它们一开始就必须不存在的任何理由，而不仅仅是具有初始状态。有关您尝试执行的操作的更多详细信息会有所帮助。

【讨论】：

这是否意味着如果我在一个迭代器中，那时我可以为它创建一个状态吗？

好的，我找到了我正在寻找的解决方案。谢谢，您的回答提高了我的搜索技能:) (***.com/a/29281499/842607)

【参考方案2】：

在内部方法中创建状态 - 渲染，是个坏主意。 React 建议在构造函数中仅使用 setState() 或 'state = ...'。

【参考方案3】：

如果您使用的是打字稿，我会这样定义您的状态：

interface IComponentState 
    dynamicState: any

然后您可以将任何对象分配给此 dynamicState.... 或任何数量的选项...

在普通 JS 中你甚至不需要指定类型，所以它会更简单 - 只需在开始时指定空对象