установить значения в реагирующем хуке

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

Установка состояния носит асинхронный характер. Поэтому, прежде чем ваше состояние будет обновлено, ваша следующая итерация циклов начнется и начнется новое обновление. Вы должны сделать это вместо этого -

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 2

Более подробную информацию можно найти по ссылке ниже.

Вызов setState в al oop только обновляет состояние 1 раз

Как указал Атин, накапливать ошибки а затем обновить состояние сразу

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);

Answer 3

Вы можете получить нужные обновления, используя вариант обратного вызова функции set___.

В этом случае: setErrors(errors=>({ ...errors, [key]: val }));

Вы также можете вызывать SetErrors только после завершения sh L oop, а также.

 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)
        }