添加或编辑后，平面列表无法滚动且无法更新项目

Question

我是react native的新手。我已经创建了显示并包含了FlatList。我的FlatList不能滚动项目，也不能在我添加或编辑项目后更新列表项目，但它可以在我刷新应用程序后更新。

这是我的list.js

import React,{useState,useEffect} from 'react';
import { FlatList, StyleSheet, Text, View, Image, Button, TouchableOpacity} from 'react-native';
export default function MovieList(props) {
const [movies,setMovies] = useState([])
useEffect(()=>{
fetch(`http://192.168.1.250:8000/api/movies/`,{
method:'GET',
headers:{
'Authorization':`token 91f29b5f051fef8a1c6ab2779ed0410be37ceb48`,
'Accept': 'application/json',
'Content-Type':'application/json'
}
})
.then(res => res.json())
.then(jsonRes => setMovies(jsonRes))
.catch(error=>console.log(error));
},[])
const movieclicked = (movie) =>{
props.navigation.navigate("Detail",{movie:movie,title:movie.title})
}
return (
<View style={styles.container}>
<Image source={require('../assets/killer-queen.png')}
style={{ width:'100%', height:135, paddingTop:30 }}
resizeMode= 'contain'
/>
<FlatList
scrollEnabled={true}
data={movies}
extraData={movies}
renderItem={({item}) => (
<TouchableOpacity onPress={() => movieclicked(item)}>
<View style={styles.item}>
<Text style={styles.itemText}>{item.title}</Text>
</View>
</TouchableOpacity>   
)}
keyExtractor={(item,index)=>index.toString()}
/>
</View>
);
}
MovieList.navigationOptions = screenProps => ({
title :'List of Movies',
headerStyle : {
backgroundColor:'orange',
},
headerTintColor: '#fff',
headerTitleStyle : {
fontWeight : 'bold',
fontSize : 20,
},
headerRight: () => (
<Button title='Add New' color='orange' onPress={()=>screenProps.navigation.navigate('Edit',{movie:{title:'',description:''}})} />
),
})
const styles = StyleSheet.create({
container: {
backgroundColor: '#282c35',
},
item:{
flex:1,
padding:10,
height:50,
backgroundColor:'#282c35',
},
itemText:{
color:'#fff',
fontSize:20
}
});

这是我的edit.js

import React,{useState,useEffect} from 'react';
import { StyleSheet, Text, View, Button,TextInput } from 'react-native';

export default function Edit(props) {
const movie = props.navigation.getParam('movie',null)
const [title,setTitle] = useState(movie.title)
const [description,setDescription] = useState(movie.description)
const saveMovie = () => {
if (movie.id) {
fetch(`http://192.168.1.250:8000/api/movies/${movie.id}/`,{
method:'PUT',
headers:{
'Authorization':`token 91f29b5f051fef8a1c6ab2779ed0410be37ceb48`,
'Accept': 'application/json',
'Content-Type':'application/json'
},
body: JSON.stringify({ title: title, description: description})
})
.then(res => res.json())
.then(movie => {
props.navigation.navigate("Detail",{movie:movie,title:movie.title})
})
.catch(error=>console.log(error));
} else {
fetch(`http://192.168.1.250:8000/api/movies/`,{
method:'POST',
headers:{
'Authorization':`token 91f29b5f051fef8a1c6ab2779ed0410be37ceb48`,
'Accept': 'application/json',
'Content-Type':'application/json'
},
body: JSON.stringify({ title: title, description: description})
})
.then(res => res.json())
.then(movie => {
props.navigation.navigate("MovieList")
})
.catch(error=>console.log(error));
}


};

return (
<View style={styles.container}>
<Text style={styles.label}>Title</Text>
<TextInput
style = {styles.input}
placeholder = 'Input the movie title.'
onChangeText = {text=>setTitle(text)}
value={title}
/>
<Text style={styles.label}>Description</Text>
<TextInput
style = {styles.input}
placeholder = 'Input the movie description.'
onChangeText = {text=>setDescription(text)}
value={description}
/>
<Button onPress={() => saveMovie()} title={movie.id?"Edit":"Add"}/>
</View>
);
}
Edit.navigationOptions = screenProps => ({
title : screenProps.navigation.getParam('title'),
headerStyle : {
backgroundColor:'orange',
},
headerTintColor: '#fff',
headerTitleStyle : {
fontWeight : 'bold',
fontSize : 20,
},
})
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#282c35',
padding:10,
},
label:{
color:'#fff',
fontSize:24,
padding:10,
},
input:{
fontSize:24,
backgroundColor: '#fff',
padding:10,
margin:10
}
});

请帮我解决这个问题提前谢谢。

Answer 1

对您当前逻辑的建议…

是使用refreshStamp作为触发您的MoviesList重新获取你的列表…因为你目前只在componentDidMount上获取电影列表，通过将[]传递给useEffect-deps param…这就是为什么你只在重新加载app后才看到更新，因为你正在强制重新加载你的组件…

/** In your Edit screen */
navigation.navigate('MovieList', { refreshStamp: Date.now() });
/** In MoviesList */
const refreshStamp = props.route.params?.refreshStamp;
useEffect(() => {
/** fetch your movies list here */
}, []);
useEffect(() => {
if (refreshStamp) {
/** fetch your movies list here */
}
}, [refreshStamp]);

更好的方法

使用redux-actions来处理你的取操作…我的意思是有一个redux-action来处理edit||add，它应该在成功时重新获取movies-list…