onChangeText возвращает предыдущее значение состояния

Question

Я пытаюсь создать динамическую c форму. Пользователь должен ввести обязательные поля count в первом текстовом поле. После этого я добавляю введенное значение count в состояние и отображаю все поля. Но в "onChangeText" возвращается предыдущее состояние . В то же время, если я нажму на кнопку, будет возвращено значение текущее состояние ?

import React, {useState} from "react";
import {Button, TextInput, View, StyleSheet} from "react-native";

export const TestScreen = () => {
    const initialState: any = {
        num: null,
        inputs: null
    };
    const [state, setState] = useState(initialState);

    const changeNum = (num = null) => {
        const inputs = [];
        if (num) {
            for (let i = 0; i < num; i++) {
                inputs.push(
                    <TextInput
                        key={i.toString()}
                        style={styles.input}
                        onChangeText={changeNewInput}
                    />
                )
            }
        }
        setState({num, inputs})
    };

    const changeNewInput = (e) => {
        console.log(state.num)
    };

    return (
        <View>
            <TextInput onChangeText={changeNum} style={{...styles.input, borderColor: 'red'}}/>
            {state.inputs}
            <Button title={'see count'} onPress={() => console.log(state.num)}/>
        </View>
    )
};

const styles = StyleSheet.create({
    input: {
        borderWidth: 1,
        borderColor: 'black',
        marginBottom: 5
    }
});

Answer 1

обновление состояния с использованием средства обновления, предоставляемого ловушкой useState, является асинхронным. Вот почему вы видите предыдущее значение вашего состояния, когда вызываете метод changeNewInput после setState. Если вы хотите, чтобы ваше состояние обновлялось, вы можете использовать, используйтеEffect.

useEffect(() => {
        console.log(state.num)
}, [state]);