React Native FlatList 仅在 TextInput 或 Picker 更改时更新

Question

我正在尝试将输入字段和选择器中的文本动态添加到 React Native 中的 FlatList。我遇到的问题是 FlatList 没有在我按下按钮后立即更新。

该项目最终确实被添加到列表中，但只有在我触发文本输入的 onChangeText 或选择器元素的 onValueChange 之后。

import React, { Component } from 'react';
import { View, Text, Picker } from 'react-native';
import { TextInput } from 'react-native-paper';
import { TouchableOpacity, FlatList, ScrollView } from 'react-native-gesture-handler';

CreateSetScreen = () => {
    const [value, onChangeText] = React.useState('Placeholder');
    const [pickerValue, setPickerValue] = React.useState("1");
    const [listValues, setListValue] = React.useState([]);
    
    joinData = () => {
        listValues.push({"content": value, "category": pickerValue, "key": listValues.length.toString()});
        setListValue(listValues);
    }

    return(
        <View>
            <TextInput 
                style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                onChangeText={text => onChangeText(text)}
                value={value}
            />
            <Picker
                selectedValue={pickerValue}
                style={{height: 50}}
                onValueChange={(itemValue) => setPickerValue(itemValue)}
            >
                <Picker.Item label="Kategorie 1 - 1%" value="1" />
                <Picker.Item label="Kategorie 2 - 10%" value="2" />
                <Picker.Item label="Kategorie 3 - 20%" value="3" />
                <Picker.Item label="Kategorie 4 - 29%" value="4" />
                <Picker.Item label="Kategorie 5 - 40%" value="5" />
            </Picker>
            <TouchableOpacity
                style={{backgroundColor:'#DDDDDD'}}
                onPress={() => joinData()}
            >
            <Text>Add Item!</Text>
            </TouchableOpacity>
            <FlatList
                data={listValues}
                renderItem={({item}) => (<Text>{item.category}: {item.content}</Text>)}
            />
        </View>
    )
}
    

export default CreateSetScreen;

感谢任何帮助，谢谢。

Answer 1

尝试向您的 FlatList 添加密钥提取器：

<FlatList
  data={listValues}
  renderItem={({item}) => (<Text>{item.category}: {item.content}</Text>)}
  keyExtractor={(item, index) => String(index)}
/>

Answer 2

似乎 .push() 在 React Hooks 的 setter 函数中有效，但它没有。而不是返回数组本身，.push() returns修改后的数组长度。

另一方面，.concat() 用于更新状态，即 .concat() 创建一个新数组，然后 returns 更改后的数组。

所以只需用这种方式稍微改变一下您的 joinData 函数即可。

const joinData = () => {
    setListValue(listValues => listValues.concat({ "content": value, "category": pickerValue, "key": listValues.length.toString() }));
}

React Native FlatList 仅在 TextInput 或 Picker 更改时更新

React Native FlatList only gets updated when TextInput or Picker changes

javascript

textinput

react-native