FlatList 自动更新或重新渲染反应本机

Question

我是 react native 的新手，现在我在这个问题上卡住了 2 天。我正在尝试向我的列表中添加一个新项目，该项目作为状态提供给 Flatlist。我读到 FlatList 是一个纯组件，除非通过“extraData”告知它，否则它不会重新呈现自己，而且当状态值更改时，组件会重新呈现自己，但这两个选项不会似乎对我不起作用。显然，我做错了什么或者我的概念不清楚。看看我的代码。

import { StatusBar } from 'expo-status-bar';
import React,{useState, useEffect} from 'react';
import { StyleSheet, Text, View, TouchableOpacity, FlatList, SafeAreaView, ToastAndroid } from 'react-native';



export default function App() {

  var dishList = [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Third Item',
    },
  ]
  const [dishes, setDishes] = useState(dishList)
  var count = 0;

  useEffect(()=>{
    console.log("use")
  },[dishes])

  const CustomDish = (props) => {
    return(
      <View style={styles.item}>
        <TouchableOpacity  >
          <Text style={styles.title}>{props.title} = {props.id}</Text>
        </TouchableOpacity>
      </View>
    )
  };

  const renderItem = ({ item }) => (
    <CustomDish title={item.title} id={item.id} />
  );

  function addItem(){
    count = count + 1;
    console.log("Count: "+ count)
    var i = {
      id: `${count}`,
      title: `${count + " Item"}`,
    }
    dishList.push(i)
    setDishes(dishList)
    console.log("state length: "+ dishes.length)
    console.log("list length: "+ dishList.length)
    
  }

  function renderScreen(){
    return(
      <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={{backgroundColor: 'blue', flex:1,width:'100%', height:"100%"}}>
        <SafeAreaView style={{margin: 20}} >
          <FlatList
            data={dishes}
            renderItem={renderItem}
            keyExtractor={item => item.id}
          />
      </SafeAreaView>
      </View>
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity style={styles.button} onPress={addItem} >
          <Text style={styles.buttonText} >Add</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} >
          <Text style={styles.buttonText} >Remove</Text>
        </TouchableOpacity>
      </View>
    </View>
    )
  }

  return (
    <SafeAreaView style={styles.container}>
      {renderScreen()}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button:{alignSelf: 'auto',backgroundColor: 'red', height: 50, width: 100, justifyContent:"center", margin: 10},
  buttonText:{alignSelf: 'center', fontWeight: 'bold'},
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 20,
  },

});

我在这里要做的是按下“添加”按钮，将一个新项目添加到我的列表中，同时显示一个视图来表示它已添加到列表中。所以在 console.log 中，我的列表和状态的值确实更新了，它的长度确实从 3 变为 4 和 4 变为 5 等等，每次我按下按钮但在屏幕上，FlatList 不呈现任何新组件，请帮助。

Answer 1

你需要这样做

function addItem() {
    count = count + 1;
    console.log("Count: " + count);
    var i = {
        id: `${count}`,
        title: `${count + " Item"}`,
    }
    let dishTemp = [...dishes];
    dishTemp.push(i);
    setDishes(dishTemp);
    console.log("state length: " + dishes.length);
    console.log("list length: " + dishList.length);
}

Answer 2

count 变量将在每次重新渲染 周期时重置。

您应该将计数变量声明移到 App 组件之外。

喜欢：

var count = 0;

export default function App() {
    ...
}

FlatList 自动更新或重新渲染反应本机

FlatList auto update or re-render react native

react-native

react-native-flatlist