在 FlatList 内 2 到 5 秒后 React Native 可触摸不透明度按下

Question

再会，

我正在做一个小型反应本机项目，我从 API 获取数据，但我注意到每次我用来自 ZDB974238714CA8DE634A7CE1D083A14F 的数据填充 state 时，当应用程序内的 Opac 变得缓慢和可触摸时，该 Flatlist 的子元素大约需要 5 秒才能响应。

//Don't worry it's all wrapped in a parent container

<View style={globalStyles.searchContainer}>
    <TextInput style={globalStyles.textInput} placeholder="Who are you looking for? (e.g. Plumber)" onChangeText={setJob}/>
    <TouchableOpacity style={globalStyles.searchButton} onPress={handleSearch}> 
    <Text style={globalStyles.text}>Search</Text></TouchableOpacity>
</View>

<FlatList 
    data={workers}
    keyboardShouldPersistTaps="handled"
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item }) => (
    <View style={globalStyles.workerCard}>
        <Image 
            style={globalStyles.thumbnail} 
            source={{uri: globalConfig.api_url + item.profile_picture}} 
        />

        <View style={globalStyles.workerDetails}>
            <Text style={globalStyles.textDetails}>Name: {`${item.first_name} ${item.surname}`}</Text>
            <Text style={globalStyles.textDetails}>Gender: {item.gender}</Text>
            <Text style={globalStyles.textDetails}>Job: {item.job}</Text>
            <Text style={globalStyles.textDetails}>Price: {`R${item.price}`}</Text>
            <Text style={globalStyles.textDetails}>Transport fee: {`R${item.transport}`}</Text>
            <Text style={globalStyles.textDetails}>Other Job: {(item.service1) ? item.service1 : ""} </Text>
            <Text style={globalStyles.textDetails}>Other Job: {(item.service2) ? item.service2 : ""} </Text>
            <Text style={globalStyles.textDetails}>Online: {(item.available) ? "Yes" : "No"} </Text>
            <TouchableOpacity style={globalStyles.searchButton} onPress={() => bookWorker(item)}>
                 <Text style={globalStyles.text}>Book</Text>
            </TouchableOpacity>
         </View>
     </View>
    )}
/>

Answer 1

将“extraData”属性添加到您的 flatList。 这将告诉您的 flatList 重新呈现数据更改。 （ https://reactnative.dev/docs/flatlist#extradata ）

 <FlatList 
    data={workers}
    keyboardShouldPersistTaps="handled"
    keyExtractor={(item, index) => index.toString()}
    extraData = {this.state.refreshing}
    renderItem={({ item }) => ...

Here "this.state.refreshing" could be a boolean or an incremented integer that is updated each time you call the api.

或者，最推荐的是，您可以添加一个 onRefresh 属性并将您的 api 调用移动到那里。 （ https://reactnative.dev/docs/flatlist#onrefresh ）。 一旦您更新“worker”数组，这将为您处理所有 flatList 更改。

Answer 2

我想通了，有一个 function 在组件的某个地方被调用，我删除了它，现在它工作得很好。