Подтвердите с помощью useEffect в реагирующих хуках - PullRequest
Новая
       19

Подтвердите с помощью useEffect в реагирующих хуках

0 голосов
/ 27 апреля 2020

У меня есть такой код, и я хочу, чтобы при ошибках === 0, затем в setAmount появлялась следующая ошибка:

index. js: 1 Предупреждение: превышена максимальная глубина обновления. Это может произойти, когда компонент вызывает setState внутри useEffect, но useEffect либо не имеет массива зависимостей, либо одна из зависимостей изменяется при каждом рендеринге. 

    const [values, setValues] = useState({a:2, b:3})
    const [errors, setErrors] = useState({a:2, b:3})
    const [Amount, setAmount] = useState({a})

    useEffect(()=>{      
        setErrors(validate(values));

        if(Object.keys(errors).length === 0) {
          setAmount(a+b)
        } 

    }, [errors, values.a, values.b])
    return{values, errors}

Как решить эту проблему? Я хочу, чтобы при изменении значений a и b при отсутствии ошибок выполнить setAmount.

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 27 апреля 2020

Причина, по которой вы получаете бесконечное значение l oop, заключается в том, что каждый раз при рендеринге эффект запускается и вызывает setError с новым объектом. Так как вы просто устанавливаете состояние, вы визуализируете снова и повторяете l oop

Я не думаю, что вам нужно три состояния здесь. Похоже, вы хотите, чтобы ошибки и amount всегда были отражением того, что есть в values. В этом случае просто используйте одно состояние и рассчитайте остальные на основе этого состояния. 

const [values, setValues] = useState({ a: 2, b: 3 });
const errors = validate(values);
const amount = Object.keys(errors).length === 0 ? values.a + values.b : 0; // Not sure what value you want in the case where there are errors, so i assumed 0

return { values, errors };
1 голос
/ 27 апреля 2020

Каждый раз, когда эффект запускается, он будет setErrors(validate(values));, а поскольку errors запускает эффект для повторного запуска, это бесконечный l oop. добавить проверку перед setErrors(validate(values));

 useEffect(()=>{ 
    errors != validate(values) && setErrors(validate(values));

    if(Object.keys(errors).length === 0) {
      setAmount(a+b)
    } 

}, [errors, values.a, values.b])
...