Question

我希望我的应用显示一个文本输入，当您开始在第一个文本输入中书写时，该应用将显示第二个文本输入，依此类推... 我下面的代码的问题是计数器始终保持为零。我已经测试过线程通过console.log（）进入if语句，但是计数器没有变化，我开始发疯了

     import React from 'react';
    import { useState, useEffect } from 'react';
    import { Button, View, StyleSheet, TextInput, FlatList } from 'react-native';

    import colour from '../constants/Colors';
    import StartButton from '../components/Buttons/BackToBackButton';

    function ShowNames(props) {
        return (
            <View style={styles.lineContainer}>
                <TextInput
                    style={{ width: '70%', height: 40, borderColor: 'white', borderWidth: 2 }}
                    placeholder='Legg in navn her'
                    placeholderTextColor='white'
                    selectionColor='black'
                    onChangeText={props.handleTextChange}
                />
            </View>
        )
    }



    export default function BackToBack(props) {

        const [nameList, setList] = useState([]);
        const [counter, setCounter] = useState(0);
        const [textInputList, setInputList] = useState([{key: '2.9204739', value: <ShowNames handleTextChange={(text) => handleTextChange(text, counter)} />}])


        const handleTextChange = (text, id) => {
            tempList = nameList
            tempList[id] = text
            setList(tempList)

            console.log("ID: " + id)
            console.log("Counter: " + counter)

            if (id == counter) {
                console.log("yo")
                setCounter(counter + 1)
                AddNameInputs()
            }
            console.log(nameList)
        }



        function AddNameInputs() {
            const temp =
                <View style={styles.lineContainer}>
                    <TextInput
                        style={{ width: '70%', height: 40, borderColor: 'white', borderWidth: 2 }}
                        placeholder='Legg in navn her'
                        placeholderTextColor='white'
                        selectionColor='black'
                        onChangeText={(text) => handleTextChange(text, counter)}
                    />
                </View>
            setInputList([...textInputList, {key: Math.random().toString(), value: temp}])
        }



        return (
            <View style={styles.container}>
                <FlatList data={textInputList} renderItem={itemData => itemData.item.value} />
                <StartButton title={"Start!"} height={100} />
            </View>
        )
    }

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: colour.lightTurquoise,
            alignItems: 'center',
            justifyContent: 'flex-start',
            paddingTop: 20,
            paddingBottom: 20
            // borderWidth: 4,
            // borderColor: 'yellow'
        },
        lineContainer: {
            flexDirection: 'row',
            paddingBottom: 20

        }

    })

请帮助我：）

Answer 1

这解决了所有问题：）

     useEffect(()=> 
        {AddNameInputs()}, [counter])

反应本机计数状态不更新

1 个答案: