Государство не меняется в реакции родного

Question

Я довольно новичок, чтобы отреагировать на натив и у меня возникли проблемы с установкой нового состояния Все работает нормально, пока не появится третий ввод текста, когда я начну писать внутри него, счетчик застрянет на 1, когда он должен быть на 2, и, кроме того, обновить textInputList слишком два элемента TextInput. Я хочу понять, почему счетчик не меняется, и как решить эту проблему:)

import React from 'react';
import { useState } from 'react';
import { Button, View, StyleSheet, TextInput } 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(null)

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

        if (id == counter) {

            setCounter(counter + 1)
            AddNameInputs()
        }
    }

    function AddNameInputs()
        var tempList = [];

        for (let i = 0; i < counter; i++) {
            console.log('i: ' + i)
            tempList.push(
                <View style={styles.lineContainer} key={i+2}>
                    <TextInput
                        style={{ width: '70%', height: 40, borderColor: 'white', borderWidth: 2 }}
                        placeholder='Legg in navn her'
                        placeholderTextColor='white'
                        selectionColor='black'
                        onChangeText={(text) => handleTextChange(text, i+2)}
                    />
                </View>
            )
        }
        setInputList(tempList)

    }

    return (
        <View style={styles.container}>
            <ShowNames handleTextChange={(text) => handleTextChange(text, 0)} />
            <ShowNames handleTextChange={(text) => handleTextChange(text, 1)} />
            {textInputList}
            <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

Мне кажется, проблема в этой строке tempList = nameList. Предполагается, что вы ссылаетесь на один и тот же объект, когда устанавливаете состояние, а не запускаете соответствующие обновления. Поэтому самым быстрым решением было бы просто клонировать его с помощью оператора распространения, например tempList = [...nameList]?