Question

我的问题是如何在 useEffect() 中设置 useState 变量后重置它。这是我的代码：

    const [warningDay, setWarningDay] = useState('');
    const [warningMonth, setWarningMonth] = useState('');
    const [warningYear, setWarningYear] = useState('');

    useEffect(() => {
    if (errMsg) {
      setWarningDay('date-dropdown__warning');
      setWarningMonth('date-dropdown__warning');
      setWarningYear('date-dropdown__warning');
    } else {
      setWarningDay('');
      setWarningMonth('');
      setWarningYear('');
    }
  });

在组件内部，我有一个 html select 标签，它有一个像这样的 onChange 函数：

<select
              id={`${props.id}-day`}
              disabled={props.disabled}
              className={classNames('date-dropdown__field', warningDay)}
              onChange={e => {
                setWarningDay('');
              }}
            >

有没有办法将 setWarningDay() 设置为空，因为它总是返回到 useEffect() 中的任何内容。当用户立即进行更改时，我想将其设置为空。非常感谢。

Answer 1

这里的问题是您缺少 useEffect() 中的依赖项声明。这会导致它每次渲染组件时运行。查看 useEffect() 文档了解更多详情。

在这种情况下，您依赖于 errMsg 的值，因此它非常适合此依赖项数组。通过此更改，效果现在将仅在 errMsg 变量发生更改时运行：

  useEffect(() => {
    if (errMsg) {
      setWarningDay('date-dropdown__warning');
      setWarningMonth('date-dropdown__warning');
      setWarningYear('date-dropdown__warning');
    } else {
      setWarningDay('');
      setWarningMonth('');
      setWarningYear('');
    }
  }, [errMsg]); // <- notice the dependencies array added here

这应该可以解决您的问题，因为现在您可以在逻辑的其他部分调用 setWarningDay() 并且它应该会按预期工作。

Answer 2

useEffect(() => {
  // ...
}, [warningDay, warningMonth, warningYear])

你能试试这个代码吗？

在 useEffect 中使用时覆盖 useState 变量

2 个答案: