Javascript 平面列表可以'；t在添加或编辑后滚动并不更新项目

我是新来的。 我已经创建了显示并包含平面列表。我的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
  }
});

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
  }
});

import React，{useState，useffect}来自“React”；
从“react native”导入{FlatList、样式表、文本、视图、图像、按钮、TouchableOpacity}；
导出默认函数MovieList（道具）{
const[movies，setMovies]=useState（[]）
useffect（（）=>{
取回(`http://192.168.1.250:8000/api/movies/`,{
方法：'GET'，
标题：{
“授权”：令牌91f29b5f051fef8a1c6ab2779ed0410be37ceb48`，
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}
})
.then（res=>res.json（））
.然后（jsonRes=>setMovies（jsonRes））
.catch（错误=>console.log（错误））；
},[])
const movieclicked=（电影）=>{
props.navigation.navigate（“详细信息”，{movie:movie，title:movie.title}）
}
返回(
(
电影剪辑（项目）}>
{item.title}
)}
keyExtractor={（项，索引）=>index.toString（）}
/>
);
}
MovieList.navigationOptions=屏幕道具=>({
标题：“电影列表”，
头型：{
背景颜色：'橙色'，
},
标题颜色：“#fff”，
头饰样式：{
fontWeight:'粗体'，
尺寸：20，
},
头灯：（）=>(
screenProps.navigation.navigate（'Edit'，{movie:{title:''，description:''}}）}/>
),
})
const styles=StyleSheet.create({
容器：{
背景颜色：“#282c35”，
},
项目：{
弹性：1，
填充：10，
身高：50，
背景颜色：“#282c35”，
},
项目文本：{
颜色：“#fff”，
尺寸：20
}
});

这是我的edit.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
  }
});

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
  }
});

import React，{useState，useffect}来自“React”；
从“react native”导入{样式表、文本、视图、按钮、文本输入}；
导出默认功能编辑（道具）{
const movie=props.navigation.getParam（'movie'，null）
const[title，setTitle]=useState（movie.title）
const[description，setDescription]=useState（movie.description）
const saveMovie=（）=>{
if（movie.id）{
取回(`http://192.168.1.250:8000/api/movies/${movie.id}/`{
方法：'PUT'，
标题：{
“授权”：令牌91f29b5f051fef8a1c6ab2779ed0410be37ceb48`，
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（{title:title，description:description}）
})
.then（res=>res.json（））
.然后（电影=>{
props.navigation.navigate（“详细信息”，{movie:movie，title:movie.title}）
})
.catch（错误=>console.log（错误））；
}否则{
取回(`http://192.168.1.250:8000/api/movies/`,{
方法：'POST'，
标题：{
“授权”：令牌91f29b5f051fef8a1c6ab2779ed0410be37ceb48`，
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（{title:title，description:description}）
})
.then（res=>res.json（））
.然后（电影=>{
道具、导航、导航（“电影列表”）
})
.catch（错误=>console.log（错误））；
}
};
返回(
标题
setTitle（文本）}
值={title}
/>
描述
setDescription（文本）}
值={description}
/>
saveMovie（）}title={movie.id？“编辑”：“添加”}/>
);
}
Edit.navigationOptions=screenProps=>({
标题：screenProps.navigation.getParam（“标题”），
头型：{
背景颜色：'橙色'，
},
标题颜色：“#fff”，
头饰样式：{
fontWeight:'粗体'，
尺寸：20，
},
})
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#282c35”，
填充：10，
},
标签：{
颜色：“#fff”，
尺寸：24，
填充：10，
},
输入：{
尺寸：24，
背景颜色：“#fff”，
填充：10，
差额：10
}
});

---

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

关于您当前逻辑的建议…

是使用

refreshtstamp

作为您的

MoviesList

的触发器，以重新获取您的列表。。。因为您当前仅在启用

componentDidMount

时获取电影列表，方法是将

[]

传递给您的

useffect deps参数

。。。这就是为什么只有在重新加载应用程序后才能看到更新，因为您正在强制重新安装组件

 /** 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操作来处理编辑| |添加，它应该在成功后重新获取

电影列表

。

你在

添加新的

中做什么。。。plz包含相关代码。。。