转换 React useState hooks 以传入 props 并更新 prop 值

Question

我正在构建一个带有验证的更改密码组件。我们开始使用状态挂钩函数来检查输入的验证（一个大写字符、一个小写字符、数字等）。这一切都很好。

现在我需要将这些更改为默认道具，因为我们希望能够在 Storybook 中实际测试每个验证。

一些截断的代码：

    type ChangePassWordModalProps = {
        ...
        isOneSpecialCharacter: boolean,
        isMinLength: boolean,
        ...
    }
    
    const defaultProps = {
        ...
        isOneSpecialCharacter: false,
        isMinLength: false,
        ...
    }
    
    const ChangePassWordModalProps = (props: ChangePassWordModalProps) => {
        const [minLength, setMinLength] = useState<boolean>(props.isMinLength);
        const [oneSpecialCharacter, setOneSpecialCharacter] = useState<boolean>(props.isOneSpecialCharacter);
        const oneSpecialCharacterRegex = new RegExp ('(?=.*[#$@!%&*?])');
    
        useEffect(() => {
          setMinLength(inputPasswordValue.length >= 12);
          setOneSpecialCharacter(oneSpecialCharacterRegex.test(inputPasswordValue));
          ...
        },[
            oneSpecialCharacterRegex,
        ]);
    
        return (
    <ul className='validation-wrapper mt-4'>
      <li
        id='specialChars'
        className={`${oneSpecialCharacter ? 'valid-password' : 'not-valid-password'}`}
      >
        1 special character
      </li>
    </ul>
  );
}

这在用户输入输入时起作用。但是，如果我通过 className={${props.isOneSpecialCharacter? 'valid-password' : 'not-valid-password'}}

这将在 Storybook 中切换一个真假按钮，但随后 onChange 功能不起作用。

我确实看过使用 useState 来更新对象，如下所示：

const [oneSpecialCharacter, setOneSpecialCharacter] = useState({
    oneSpecialCharacter: false,
    props.isOneSpecialCharacter: false // this is not allowed of course
  });

在这里：https://stackoverflow.com/a/53575023/1238244

但是必须设置两个评估相同验证的布尔值似乎很愚蠢。

我还尝试将let 用于我的useStates，如下所示：

let [oneSpecialCharacter, setOneSpecialCharacter] = useState<boolean>(props.isOneSpecialCharacter);

然后将oneSpecialCharacter 设置为等于props.isOneSpecialCharacter，但不要骰子，我们不会为布尔值工作。

我似乎无法将 props 值传递到我的 set 函数或 useEffect 调用中。

我试过了：

useEffect(() => {
   if (inputPasswordValue.length >= 12) {
       return props.isMinLength = true;
   ... 
}

我猜这是对 useEffect 的滥用。

接下来我将尝试添加一个工作示例并更新问题，但如果有人有好的想法请告诉我。

Answer 1

useEffect 没有运行的原因是因为除了 useEffect 本身之外，您没有在任何地方更改oneSpecialCharacterRegex。 这样，useEffect 将不会在第一次渲染后再次运行。

试试这个：

useEffect(() => {
   setMinLength(inputPasswordValue.length >= 12);
          
   setOneSpecialCharacter(oneSpecialCharacterRegex.test(inputPasswordValue))     },
[inputPasswordValue] // This will make the useEffect run everytime the input is changed, thus testing your rule everytime.
);

另外，你从哪里得到inputPasswordValue？它来自父母吗？它不在示例中。在这种情况下，只需拨打props.inputPasswordValue