Я хочу, чтобы мое приложение показывало один ввод текста, и когда вы начнете писать первый ввод, приложение будет показывать второй ввод текста и т. Д. Проблема с моим кодом ниже состоит в том, что счетчик всегда остается равным нулю. Я проверил, что поток входит в оператор if через console.log (), но счетчик не меняется, и я начинаю с go crazy
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
}
})
, пожалуйста, помогите мне:)