反应生命周期循环

Question

我有一个反应表单组件 - 它有一个方法DataLayout更新表单输入并将更改添加到状态。我正在尝试添加_handleInputChange，顾名思义，它会计算预订价格。我试图让它显示给用户，这样当输入字段改变时，价格变化就会反映出来。

我正在努力弄清楚如何正确执行这个 - 我想这是缺乏反应生命周期的知识，我已经阅读了文档并在堆栈上搜索了几个问题，然而，答案似乎在回避我。包含的示例在_calculatePrice方法更新状态值然后再次调用自身时陷入循环。

非常感谢任何帮助。

由于

Form.jsx

_calculatePrice

Answer 1

尽量不要在您的州内包含重复信息。

例如，如果您的州包含firstName和lastName，则fullName不需要其他州。

尝试从您的州中删除subTotal和total。而是在render方法内计算它。这样，您就可以避免在setState次调用时造成无限循环。

我创建了这个CodeSandbox，它显示了一个简单的例子。