Question

我的申请状态如下。

const [errors, setErrors] = useState({});

当我尝试存储错误时，它将返回在钩子状态下进行验证的值，这些值将被替换并且仅存储最后一个值

 for (const key in book) {

            if (key == 'category_id') {
                val = validating('category', book[key], categories);
            } else {
                val = validating(key, book[key]);
            }

            console.log(key + ':' + val.status)
            setErrors({ ...errors, [key]: val });
            //console.log(errors)
        }

验证函数返回{status：true}或{message：'error'，status：'false'}

验证功能工作正常，问题在于验证返回的对象未累积

Answer 1

您可以使用set___函数的回调变体来获取所需的更新。

在这种情况下：setErrors(errors=>({ ...errors, [key]: val }));

您也只能在完成循环后才调用SetErrors。

 for (const key in book) {

            if (key == 'category_id') {
                val = validating('category', book[key], categories);
            } else {
                val = validating(key, book[key]);
            }

            console.log(key + ':' + val.status)
            setErrors(errors=>({ ...errors, [key]: val }));
            //console.log(errors)
        }

Answer 2

设置状态本质上是异步的。因此，在状态更新之前，您的下一个循环迭代开始并开始新的更新。您应该改为这样做-

const tempErrors = {};

  for (const key in book) {

        if (key == 'category_id') {
            val = validating('category', book[key], categories);
        } else {
            val = validating(key, book[key]);
        }

        console.log(key + ':' + val.status)
        tempErrors[key] = val;
        setErrors({ ...errors, [key]: val });
        //console.log(errors)
    }

setErrors(tempErrors);

Answer 3

更多信息可在下面的链接中找到。

Calling setState in a loop only updates state 1 time

正如Atin所指出的那样，累积错误，然后立即更新状态

const tempErrors = {};

  for (const key in book) {

        if (key == 'category_id') {
            val = validating('category', book[key], categories);
        } else {
            val = validating(key, book[key]);
        }

        console.log(key + ':' + val.status)
        tempErrors[key] = val;
    }

setErrors(tempErrors);

在反应挂钩中设置值

3 个答案: