Usestate не обновляется

Question

Я пытаюсь обновить значение состояния в конце анимации, но когда я пытаюсь это сделать, оно не обновляется. Если я использую кнопку для обновления этого значения, значит, оно работает. Проверьте эту функцию, которую я сделал

const [imgIndex, setImgIndex] = useState(0)
function startAnim() {
    Animated.timing(animationValue, {
        duration: 2000,
        toValue: windowWidth,
        easing: Easing.linear,
        useNativeDriver: true,
    }).start(({ finished }) => {
        if (imgIndex != images.length - 1) {
            setImgIndex(imgIndex + 1)
            console.log(imgIndex)
            animationValue.setValue(0)
            startAnim()
        }
    });
}

в конце каждой анимации, я использую setImgIndex (imgIndex + 1), который должен обновляться, но не обновляется, в консоли каждый раз, когда он печатает 0., но анимация работает нормально, я также пробую тот же метод с setInterval, но опять же, в setInterval он каждый раз печатает 0. Если кто-нибудь знает его решение, пожалуйста, помогите мне.

Answer 1

Поскольку вы используете значение состояния в синхронизированном обратном вызове анимации, оно относится к старому значению.

• Таким образом, для обратного вызова вы должны использовать ref для правильной ссылки
• Чтобы установить состояние в обратном вызове сделайте это как setImgIndex(imgIndex => imgIndex + 1)

Для справки: https://github.com/facebook/react/issues/14010#issuecomment -433788147

const [imgIndex, setImgIndex] = useState(0)
    const imgIndexRef = useRef(imgIndex);
    imgIndexRef.current = imgIndex;
    function startAnim() {
      Animated.timing(animationValue, {
        duration: 2000,
        toValue: windowWidth,
        easing: Easing.linear,
        useNativeDriver: true,
      }).start(({ finished }) => {
        if (imgIndexRef.current != images.length - 1) {
          setImgIndex(imgIndex => imgIndex + 1)
          console.log(imgIndexRef.current)
          animationValue.setValue(0)
          startAnim()
        }
      });
    }

Answer 2

Возможно, вам стоит использовать setTimeout для печати. Поскольку imgIndex обновляется не сразу, вы можете не увидеть обновленный индекс.

const [imgIndex, setImgIndex] = useState(0)
function startAnim() {
    Animated.timing(animationValue, {
        duration: 2000,
        toValue: windowWidth,
        easing: Easing.linear,
        useNativeDriver: true,
    }).start(({ finished }) => {
        if (imgIndex != images.length - 1) {
            setImgIndex(imgIndex + 1)
            setTimeout(() => {
                console.log(imgIndex)
                animationValue.setValue(0)
                startAnim()
            }, 150)
        }
    });
}