Question

我有一个功能组件，可以处理两个方面的问题。

输入道具值表示来源。

当源发生变化时，我想用新的源创建一个新的问题模型对象。

因为我正在做这样的事情：

const [questionModel, setQuestionModel ] = useState(new QuestionModel(questionSource));

出于某些原因，它认为，“哦，我已经有了其中一个问题模型。我不需要重新创建一个。”

所以所有旧东西都留在那里。

如果我尝试执行以下操作：

setQuestionModel(new QuestionModel(questionSource));

然后它抱怨：

不变违规：重新渲染过多。反应限制数量渲染以防止无限循环。

我知道无限循环是不好的，但是我不确定如何在带有钩子的ReactJS函数中实现此功能。

当我使用类时，我可以在构造函数中指定一次，然后在render（）中再次进行调整。但是现在，渲染已与该功能的其他代码混合在一起，如何使用新的源重新渲染呢？

道具改变时是否会重新渲染力量？我以为如果道具改变就可以做到...但是没有。

Answer 1

我不知道您的道具如何变化，但有时我看到，以下误解有时会带来问题，开发人员会认为“我改变了对象，所以为什么我的组件没有重新渲染？”：

在创建新对象时，例如：

const user = { name: "john" };

您创建了一个对象，该对象具有一个指向值“ john”的属性，如下所示：

user-> {}-名称->“ john”

用户指向一个对象，当您命名时，通过以下方式指向另一个值：

user.name = "bob"

比用户仍然指向相同的对象并反应相同的对象但是当你这样做

user = { ...user, name: "bob" };

然后您将分配一个新对象，现在它是另一个对象。

Answer 2

请考虑将useEffect与传入的prop关联使用。在效果内，将新问题类型设置为本地状态。

https://reactjs.org/docs/hooks-effect.html

喜欢这个...

interface Props {
 source: QuestionSource
}

export function QuestionsModal(props: Props) {
const [questionModel, setQuestionModel] = useState<QuestionModel>(new QuestionModel(questionSource))
useEffect(() => {
    setQuestionModel(new QuestionModel(questionSource))
  }, props.source)
}

React函数：在useState之后更改状态

2 个答案: