React - 如何为 setState 使用参数 [重复]答案

【问题标题】：React - how to use params for setState [duplicate]React - 如何为 setState 使用参数 [重复]
【发布时间】：2020-02-29 12:17:34
【问题描述】：

我有一个小疑问，现在我正在尝试学习 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);
}

我在 loginhandler 中调用这个函数：

// 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 不起作用，并且数组中的错误仍然为空。有人可以帮我解决这个问题吗？

感谢您的宝贵时间:)

【问题讨论】：

关于 react 的 setState 函数有很多很多 Stack Overflow 问题。您研究了其中的哪些，具体为什么它们没有解决您的问题？
我会试试这个，谢谢，我会来反馈:)
如果您能向我们展示您的问题的minimal reproducible example，那就更好了...

标签： javascript reactjs ecmascript-6 setstate

【解决方案1】：

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

this.setState({
    loginInput: updatedArray
});

【讨论】：

但是如果我写这个，updatedArray 没有定义，因为它来自一个函数，我想每次需要显示错误时都使用这个函数，不仅在 loginhandler 中
如果是这种情况，不要在updateError 中写那个setState，而是从函数中返回updatedArray，在调用函数中返回setState。
它有效，谢谢:)

【解决方案2】：

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

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

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

【讨论】：

谢谢，但这并不能解决我的问题:)