React hooks - 不要第一次渲染
React hooks - do not render the first time
我有一个自定义的 TextField 组件，它可以在发生错误时显示，例如，当尝试提交表单但文本字段为空时。在这种情况下，该字段将自身显示为 'red' 并带有适当的错误文本。
我面临的问题是，目前当我尝试从表单组件处理该逻辑时，假设登录，（我正在使用 useState(state, setState) 处理我需要的状态）TextField 是'red' 在第一次渲染时，因为它是空的。这应该只发生在用户键入内容并再次删除它时，而不是在第一次渲染时直接删除，因为无论如何 TextField 都是空的。
以前我可以用 componentDidUpdate() 生命周期钩子解决这个问题。因此，应该使用 useEffect(...) 之类的东西？我不知道该怎么做。有什么想法吗？
你可以使用useEffect hook来触发父组件的变化，useEffect需要一个回调函数和一个数组（称为依赖项），当这个数组中的值发生变化时，useEffect执行回调调用。
在你的组件中试试这个
const [value, setValue] = useState("");
useEffect(() => setValue(initialValue), [initialValue]);
initialValue 是您组件的值（通过道具传递给子组件，例如您的输入字段）
这应该是我正在寻找的解决问题的概念性解决方案。
这里是展示概念的小图片。有关更多信息，请阅读下面的 link。
https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
我有一个自定义的 TextField 组件，它可以在发生错误时显示，例如，当尝试提交表单但文本字段为空时。在这种情况下，该字段将自身显示为 'red' 并带有适当的错误文本。
我面临的问题是，目前当我尝试从表单组件处理该逻辑时，假设登录，（我正在使用 useState(state, setState) 处理我需要的状态）TextField 是'red' 在第一次渲染时，因为它是空的。这应该只发生在用户键入内容并再次删除它时，而不是在第一次渲染时直接删除，因为无论如何 TextField 都是空的。
以前我可以用 componentDidUpdate() 生命周期钩子解决这个问题。因此，应该使用 useEffect(...) 之类的东西？我不知道该怎么做。有什么想法吗？
你可以使用useEffect hook来触发父组件的变化，useEffect需要一个回调函数和一个数组（称为依赖项），当这个数组中的值发生变化时，useEffect执行回调调用。
在你的组件中试试这个
const [value, setValue] = useState("");
useEffect(() => setValue(initialValue), [initialValue]);
initialValue 是您组件的值（通过道具传递给子组件，例如您的输入字段）
这应该是我正在寻找的解决问题的概念性解决方案。
这里是展示概念的小图片。有关更多信息，请阅读下面的 link。
https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects