React - 如何为 setState 使用参数

Question

我有一个小问题，现在我正在尝试学习 React，我有一个登录表单，如下所示：

this.state = {
          loginInputs: [
        {
            type: 'text',
            id: 'loginForUser',
            label: 'User',
            key: 'user',
            value: '',
            error: ''
        },
        {
            type: 'password',
            id: 'loginForPassword',
            label: 'Password',
            key: 'pass',
            value: '',
            error: ''
        }
    ]
}

我映射每个输入并将其呈现在组件中。

另外，如果在您点击登录或注册按钮时输入为空，我想从状态更新数组，并且我想创建一个可用的函数：

    const isInvalidInput = (inputValue) => inputValue.length < 2;

    updateError = (array) => {
    const updatedArray = [...array];
    updatedArray.forEach((input, index) => {
        if(isInvalidInput(input.value)) {
            updatedArray[index] = { ...input, error: 'errrrrrrorrrrrrrr'}
        }
    });
    alert("yeee");
    this.setState({
        [array]: updatedArray
    });
     console.log(updatedArray);
}

我在登录处理程序中调用了这个函数：

// login handler
handlerLogin = (e) => {
    e.preventDefault();
    const { loginInputs, accounts } = this.state;

   if (inputname.length >= 2 && inputpass.length >=2) {
       store in localhost...
   } else {
       this.updateError(loginInputs);
   }

};

问题是，当我让字段为空并按下按钮时，该函数被调用但 setState 不起作用，并且数组中的错误仍然为空。有人可以帮我解决这个问题吗？

感谢您的宝贵时间:)

Answer 1

兄弟不要自己检查长度，而是使用可用于输入的 minLength 属性。此外，您的验证不会让它为您自己添加。去接收有关 Regrex JavaScript 的信息，以便您可以使用 Pattern 属性。这将使您免于使用 if 语句进行验证，并使您的代码干净。检查这个

https://github.com/1cornerstone/RegrexForm/blob/master/src/component/mastercard.js

您可以克隆项目并查看它。

Answer 2

你能试试把 this.setState 改成下面的 -

this.setState({
    loginInput: updatedArray
});

React - 如何为 setState 使用参数

React - how to use params for setState

javascript

setstate

ecmascript-6

reactjs