React钩子-第一次不渲染

Question

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

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

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

Answer 1

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

在您的组件中尝试

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

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

完整代码here

Answer 2

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

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

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