Реагировать на собственный текст Ввод внутри плоского списка с использованием массива объектов с useState, всегда повторно отображать, когда вводите что-то, что клавиатура выходит из строя

Question

У меня есть массив объектов и я выбираю их в плоский список. но при рендеринге и вводе чего-то / один символ всегда повторно рендерится и клавиатура отключается. есть идеи по решению моей проблемы?

вот мой код ... snack expo

import React, {useState} from 'react';
import {View, TextInput, FlatList, Text} from 'react-native';

function Coba() {

    const [data, setData] = useState([
        {id: 1, name: "dono"},
        {id: 2, name: "kasino"},
        {id: 3, name: "indro"}
    ]);

    const RenderComponent = (props) => {
        return (<TextInput
        key={props.index}
            style={{borderWidth: 2, borderColor: 'orange'}}
            value={data[props.index].name}
            onChangeText={val => {
                let newArray = [...data];
                newArray[props.index].name = val
                setData(newArray);
                console.log(data); //always rerender when type one character.. please help!!
            }}
        />);
    }

    const renderItem = ({item, index}) => (
        <View style={{padding: 10}}>
            <Text>name {item.id}</Text>
            <RenderComponent item={item} index={index} />
        </View>
    );

    return(
        <View style={{flex: 1, padding: 50}}>
        
            <FlatList
                data={data}
                keyExtractor={(item, index) => index.toString()}
                renderItem={renderItem}
            />

        </View>
    );
}

export default Coba;

Answer 1

Клавиатура отключается, потому что TextInput отключается при каждом рендеринге.

TextInput находится внутри функции RenderComponent, а внутри Coba, что означает, что при каждом рендеринге новый RenderComponent создается функция, и, таким образом, старая функция RenderComponent отключается.

Чтобы решить проблему, создайте функцию RenderComponent вне Coba и передайте все необходимые данные как свойства. закусочная

import React, {useState} from 'react';
import {View, TextInput, FlatList, Text} from 'react-native';

const RenderComponent = (props) => {
    return (<TextInput
    key={props.index}
        style={{borderWidth: 2, borderColor: 'orange'}}
        value={props.data[props.index].name}
        onChangeText={val => {
            let newArray = [...props.data];
            newArray[props.index].name = val
            props.setData(newArray);
            console.log(props.data); //always rerender when type one character.. please help!!
        }}
    />);
}

function Coba() {

    const [data, setData] = useState([
        {id: 1, name: "dono"},
        {id: 2, name: "kasino"},
        {id: 3, name: "indro"}
    ]);

    const renderItem = ({item, index}) => (
        <View style={{padding: 10}}>
            <Text>name {item.id}</Text>
            <RenderComponent item={item} index={index} data={data} setData={setData} />
        </View>
    );

    return(
        <View style={{flex: 1, padding: 50}}>
        
            <FlatList
                data={data}
                keyExtractor={(item, index) => index.toString()}
                renderItem={renderItem}
            />

        </View>
    );
}

export default Coba;