React hooks-第一次不渲染

Question

我有一个自定义的TextField组件，该组件可以在发生错误时显示，例如，当尝试在文本字段为空的情况下提交表单时显示。在这种情况下，该字段将自身显示为“红色”，并带有适当的错误文本。

我面临的问题是，当前当我尝试从表单组件处理该逻辑时，可以说是登录名（（我正在使用useState(state, setState)处理我的所需状态））TextField在“首先渲染，因为它为空。仅当用户键入某些内容并再次将其删除时，才应该发生这种情况，但不要在第一次渲染时直接发生，因为TextField始终为空。

[以前，我可以使用componentDidUpdate()生命周期挂钩解决该问题。因此，应该使用useEffect(...)之类的东西吗？我不知道该怎么做。有什么想法吗？

Answer 1

您可以使用useEffect挂钩来触发对父组件的更改，useEffect需要一个回调函数和一个数组（称为依赖项，当此数组中的值发生更改时，useEffect将执行回调调用。

在组件中尝试一下

const [value, setValue] = useState("");
 useEffect(() => setValue(initialValue), [initialValue]);

initialValue是您的组件中的值（通过道具传递到子组件，例如您的输入字段）

Answer 2

这应该是我正在寻找问题的概念解决方案。

这里有个小图显示了这个概念。有关更多信息，请阅读下面的链接。

https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects