如何在React Native中向函数传递字符串并实现电影排序？

你的问题核心在于没有在filter状态变化时自动触发查询，加上setState的异步特性，才导致需要点击两次才能看到效果。以下是具体的修复方案：

关键问题分析 #

1. 第二个useEffect的依赖数组为空，仅在组件挂载时执行一次，后续filter更新不会触发查询逻辑
2. getMoviesFiltered的参数filter覆盖了组件状态的filter，导致函数内部没有使用最新的状态值
3. 点击按钮仅更新状态，没有触发查询逻辑，初始加载的getMovies也和getMoviesFiltered逻辑冗余

修复后的完整代码 #

const HomeScreen = () => {
  const navigation = useNavigation();
  const [movies, setMovies] = useState([]); // 初始化为数组更符合FlatList的data要求
  const [filter, setFilter] = useState('name'); // 初始化默认排序字段

  // 合并排序查询逻辑，直接使用组件状态的filter
  const fetchMovies = async () => {
    const querySnapshot = await getDocs(query(collection(db, "movies"), orderBy(filter)));
    setMovies(querySnapshot.docs);
  };

  // 监听filter变化，自动触发查询；组件挂载时也会执行一次
  useEffect(() => {
    fetchMovies();
  }, [filter]);

  return (
    <View>
      <View>
        <TouchableOpacity onPress={() => setFilter('name')}>
          <Text>Title</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setFilter('runtime')}>
          <Text>Runtime</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setFilter('year')}>
          <Text>Year</Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={movies}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => navigation.navigate('Modal', item.data())}>
            <Image source={{ uri: item.data().pic }} />
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

export default HomeScreen;

核心修改说明 #

• 合并查询函数：把getMovies和getMoviesFiltered合并为fetchMovies，直接使用组件状态的filter，避免参数重名覆盖问题
• 添加useEffect依赖：将filter加入useEffect的依赖数组，每次filter更新时都会自动调用查询函数，无需手动触发
• 初始化默认filter：设置初始filter为'name'，确保组件挂载时就能加载正确的排序结果，同时移除冗余的初始查询useEffect
• 修正movies初始值：将movies的初始值改为数组，更符合FlatList对data的类型要求

内容的提问来源于stack exchange，提问作者Mihailo