Reactjs 当在第二个屏幕中删除平面列表中的某些项目时，在第一个屏幕上更新平面列表时出现问题

当

flatList

中的某些项目在第二个屏幕上被删除或添加到

flatList

时，我在第一个屏幕上更新

flatList

时遇到问题。我的

flatlist

是乐队列表，当我点击个人名字时，我会看到乐队成员、歌曲、专辑等详细信息。目前我有两个屏幕，带列表的主屏幕和添加或删除屏幕，列表上的项目可以自定义。这是我到目前为止所拥有的，但当从列表的第二页删除某些内容时，我无法更新主页上的列表

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity, TouchableHighlight, Button, Alert, Modal, TextInput, ScrollView, SafeAreaView } from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function UselessTextInput(props) {
  return (
    <TextInput
      {...props}
      style={{ height: 30, borderWidth: 1, padding: 6, paddingTop: 10, margin: 5, color: '#FFFCD3', borderColor: '#A5C9FA', }}
      editable
      maxLength={30}
    />
  ); t
}

const musiciansArray = [
  { id: 1, key: 'A', value: 'Pink Floyd', members: 4, songs: 165 },
  { id: 2, key: 'B', value: 'Deep Purple', members: 5, songs: 70 },
  { id: 3, key: 'C', value: 'AC/DC', members: 5, songs: 80 },[![enter image description here][1]][1]
];


function HomeScreen({ navigation, route }) {
  const [listItems, setListItems] = useState(musiciansArray);

  const [store1, setStore1] = useState("");

  const [idDeleteInput, setIdDeleteInput] = useState();

  //const [exampleArray, setExampleArray] = useState(musiciansArray);

  const ItemView = ({ item }) => {
    return (
      <View>
        <Text
          style={styles.item}
          onPress={() => getItem(item)}>
          {item.value}
        </Text>
      </View>
    );
  };

  const ItemSeparatorView = () => {
    return (
      <View style={styles.fList} />
    );
  };
  const EmptyListMessage = ({ item }) => {
    return (
      <Text
        style={styles.emptyListStyle}
        onPress={() => getItem(item)}>
        Empty list found.
      </Text>
    );
  };

  const getItem = (item) => {
    alert(' id: ' + item.id + '\n' + ' key: ' + item.key + '\n' + ' Band Name: ' + item.value + '\n' + ' Members: ' + item.members + '\n' + ' Songs: ' + item.songs)
  };


  useEffect(() => {
    if (route.params?.post) {
      setListItems(JSON.parse(route.params?.post).nameOfBand);
    }
  }, [route.params?.post]);


  return (
    <View style={styles.container}>
      <View >
        <View>
          <Text style={styles.text1}>Bands</Text>
          <FlatList
            data={listItems}
            ItemSeparatorComponent={ItemSeparatorView}
            renderItem={ItemView}
            keyExtractor={item => item.id}
            ListEmptyComponent={EmptyListMessage} />
        </View>
        <View style={styles.fixToText}>
          <TouchableHighlight style={styles.button2}
            onPress={() => navigation.navigate('Input')}
            activeOpacity={0.6}
            underlayColor='red'
          >
            <Text style={styles.textButton}>Add or Delete</Text>
          </TouchableHighlight>
        </View>
      </View>
    </View>
  );
}
function InputScreen({ navigation,route }) {
  const [listItems, setListItems] = useState(musiciansArray);

  const [nameOfBand, setNameOfBand] = useState('');
  const [keyOfBand, setkeyOfBand] = useState('');
  const [memInput2, setMemInput2] = useState('');
  const [songInput2, setSongInput2] = useState('');

  const [idDeleteInput, setIdDeleteInput] = useState();
  const [idDeleteInput2, setIdDeleteInput2] = useState();


  const [exampleArray, setExampleArray] = useState(musiciansArray);

  const delItem = () => {
    navigation.navigate('InputScreen', { post: JSON.stringify({ text: idDeleteInput2 }) });
    if (idDeleteInput2 > musiciansArray.length || idDeleteInput2 === "" || isNaN(idDeleteInput2)) {
      Alert.alert('No such id is present.');
    } else if (exampleArray.length === 0) {
      Alert.alert('Nothing can be deleted, empty list found.');
    }
    else {
      Alert.alert("Item with id " + idDeleteInput2 + " sucessfully deleted.");
      const filteredArray = exampleArray.filter(item => item.id != idDeleteInput2);
      setExampleArray(filteredArray);
    }
  }

  const alertAdd = () => {
    navigation.navigate('InputScreen', { post: JSON.stringify({ text: nameOfBand, text: keyOfBand , text: memInput2 ,text: songInput2  }) });
   
    if (nameOfBand == "" || keyOfBand == "" || memInput2 == "" || songInput2 == "") {
      Alert.alert("No new item has been added, as atleast a field is empty.");
    } else {
      var newArray = [...exampleArray, { id: exampleArray.length + 1, key: keyOfBand, value: nameOfBand, members: memInput2, songs: songInput2 }];
      setExampleArray(newArray);
      Alert.alert("Item " + nameOfBand + " added successfully.");
    }
  };


  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.text3}>Add</Text>
        <Text style={styles.text4}>Band Name:</Text>
        <UselessTextInput
          multiline
          numberOfLines={4}
          value={nameOfBand}
          onChangeText={itemText => setNameOfBand(itemText)}
        />
        <Text style={styles.text4}>Key e.g. A, B, C:</Text>
        <UselessTextInput
          multiline
          numberOfLines={4}
          value={keyOfBand}
          onChangeText={itemText => setkeyOfBand(itemText)}
        />
        <Text style={styles.text4}>No. of Members:</Text>
        <UselessTextInput
          multiline
          numberOfLines={4}
          value={memInput2}
          onChangeText={itemText => setMemInput2(itemText)}
        />
        <Text style={styles.text4}>No. of Songs:</Text>
        <UselessTextInput
          multiline
          numberOfLines={4}
          value={songInput2}
          onChangeText={itemText => setSongInput2(itemText)}
        />
      </View>

      <View style={styles.fixToText}>
        {/* <TouchableOpacity onPress={alertAdd}
          style={styles.button2}>
          <Text style={styles.textButton}>Press To Add</Text>
        </TouchableOpacity> */}
        <TouchableOpacity
          // onPress={alertAdd}
          onPress={alertAdd}
          // Pass params back to home screen
          style={styles.button2}>
          <Text style={styles.textButton}>Press To Add</Text>
        </TouchableOpacity>

      </View>

      <View>
        <Text style={styles.text3}>Delete</Text>
        <Text style={styles.text4}>Id to delete:</Text>
        <UselessTextInput
          multiline
          numberOfLines={4}
          value={idDeleteInput2}
          onChangeText={delID => setIdDeleteInput2(delID)} />
      </View>
      <View style={styles.fixToText2}>
        <TouchableOpacity onPress={delItem}
          style={styles.button3}>
          <Text style={styles.textButton}>Press To Del</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Input" component={InputScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

import React，{useState，useffect}来自“React”；
从“react native”导入{样式表、文本、视图、平面列表、TouchableOpacity、TouchableHighlight、按钮、警报、模态、TextInput、ScrollView、SafeAreaView}；
导入“反应本机手势处理程序”；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
函数UselessTextInput（道具）{
返回(
)；t
}
康斯特音乐家萨雷=[
{id:1，键：'A'，值：'PinkFloyd'，成员：4，歌曲：165}，
{id:2，键：'B'，值：'Deep Purple'，成员：5，歌曲：70}，
{id:3，键：'C'，值：'AC/DC'，成员：5，歌曲：80}，[！[在此处输入图像描述][1][1]
];
功能主屏幕（{导航，路线}）{
const[listItems，setListItems]=useState（musiciansArray）；
const[store1，setStore1]=useState（“”）；
const[idDeleteInput，setIdDeleteInput]=useState（）；
//常量[exampleArray，setExampleArray]=useState（musiciansArray）；
const ItemView=（{item}）=>{
返回(
getItem（项目）}>
{item.value}
);
};
常量ItemSeparatorView=（）=>{
返回(
);
};
常量EmptyListMessage=（{item}）=>{
返回(
getItem（项目）}>
找到空列表。
);
};
const getItem=（item）=>{
警报（'id:'+item.id+'\n'+'键：'+item.key+'\n'+'波段名称：'+item.value+'\n'+'成员：'+item.Members+'\n'+'歌曲：'+item.Songs）
};
useffect（（）=>{
if（route.params？post）{
setListItems（JSON.parse（route.params？.post）.nameOfBand）；
}
}，[route.params？post]）；
返回(
乐队
项目id}
ListMPtyComponent={EmptyListMessage}/>
navigation.navigate（'Input'）}
activeOpacity={0.6}
底层颜色='red'
>
添加或删除
);
}
函数输入屏幕（{导航，路由}）{
const[listItems，setListItems]=useState（musiciansArray）；
常量[nameOfBand，setNameOfBand]=useState（“”）；
常量[keyOfBand，setkeyOfBand]=使用状态（“”）；
const[memInput2，setMemInput2]=useState（“”）；
const[songInput2，setSongInput2]=useState（“”）；
const[idDeleteInput，setIdDeleteInput]=useState（）；
const[idDeleteInput2，setIdDeleteInput2]=useState（）；
常量[exampleArray，setExampleArray]=useState（musiciansArray）；
const delItem=（）=>{
navigation.navigate（'InputScreen'，{post:JSON.stringify（{text:idDeleteInput2}）}）；
如果（idDeleteInput2>musiciansArray.length | | idDeleteInput2===“”| | isNaN（idDeleteInput2））{
Alert.Alert（“不存在此类id”）；
}else if（例如array.length==0）{
Alert.Alert（'无法删除任何内容，找到空列表'）；
}
否则{
Alert.Alert（“id为“+idDeleteInput2+”的项目已成功删除”）；
const filteredArray=exampleArray.filter（item=>item.id！=idDeleteInput2）；
setExampleArray（filteredArray）；
}
}
常量警报添加=（）=>{
navigation.navigate（'InputScreen'，{post:JSON.stringify（{text:nameOfBand，text:keyOfBand，text:memInput2，text:songininput2}）}）；
如果（nameOfBand==“”| | keyOfBand==“”| | memInput2==“”| | songInput2==“”）{
Alert.Alert（“没有添加新项目，因为至少有一个字段是空的。”）；
}否则{
var newArray=[…exampleArray，{id:exampleArray.length+1，key:keyOfBand，value:nameOfBand，members:memInput2，songs:songInput2}]；
setExampleArray（newArray）；
Alert.Alert（“项”+nameOfBand+“已成功添加”）；
}
};
返回(
添加
乐队名称：
setNameOfBand（itemText）}
/>
A、B、C键：
setkeyOfBand（itemText）}
/>
成员数目：
setMemInput2（itemText）}
/>
歌曲数量：
setSongInput2（itemText）}
/>
{/* 
按添加
*/}
按添加
删除
要删除的Id：
setIdDeleteInput2（delID）}/>
按删除
);
}
const Stack=createStackNavigator（）；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

这就是我的应用程序现在的样子：

---

我知道这是很多代码，但是我已经在这里提到了这个概念的要点，我可能在这里遗漏了一些关于导航的东西，因为我对这个概念非常陌生。提前谢谢

屏幕未更新的原因是当您导航回屏幕时，屏幕不会重新呈现，因为它已经呈现。在第二个屏幕上所做的更改不会重新渲染上一个屏幕。为了实现这一点，如果您使用的是react导航，那么有一个选项可以为屏幕焦点添加事件侦听器，您可以使用该事件来更新屏幕

见：