反应本性：在“两个底部”标签导航屏幕上使用相同的组件。

Question

我有两个名为 todos 和完成的屏幕。我使用底部选项卡导航器向它们显示。

<Tab.Navigator
      screenOptions={({route}) => ({
        headerShown: false,
        tabBarIcon: ({focused, color, size}) => {
          let iconName = '';
          size = focused ? 25 : 20;
          if (route.name === 'To-Do') {
            iconName = 'clipboard-list';
          } else if (route.name === 'Done') {
            iconName = 'clipboard-check';
          }

          return <FontAwesome5Icon name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#0080ff',
        tabBarInactiveTintColor: '#777777',
        tabBarLabelStyle: {fontSize: 15, fontWeight: 'bold'},
      })}>
      <Tab.Screen name="To-Do" component={Todos} />
      <Tab.Screen name="Done" component={Done} />
    </Tab.Navigator>

但是，这两个屏幕几乎彼此相同，随着 data flatlist 组件的属性的变化。这就是为什么要删除重复性，我一直在考虑在两个屏幕上使用单个组件 todos 。

当我尝试这样做时，我会注意到 todos 屏幕作为空屏幕呈现，而完成屏幕使用所需的数据正确呈现。控制台日志确实在 todos 上显示一个空数组。如果我对代码进行随机更改并保存，则在自动刷新后，我会观察到它可以正确加载数据。我正在使用路由。名称检查屏幕名称。 todos 屏幕的代码如下：

import stuff...
...
const Todos = ({navigation}: TodosPageProps) => {
  const dispatch = useAppDispatch();
  const {todos}: {todos: TodoInterface[]} = useAppSelector(
    state => state.todoReducer,
  );
  const route = useRoute<RouteProp<RootTabParamList, 'To-Do' | 'Done'>>();
  const [data, setData] = useState<TodoInterface[]>([]);

  useEffect(() => {
    loadTodos();
    console.log('bruh');
  }, []);

  const loadTodos = () => {
    AsyncStorage.getItem('todos').then(fetchedTodos => {
      const parsedTodos: TodoInterface[] = JSON.parse(fetchedTodos || '[]');
      dispatch(setAllTodo(parsedTodos));

      // *************************** START *************************************
      if (route.name === 'To-Do') {
        const filteredData = todos.filter(todo => todo.done !== true);
        console.log('aisi', filteredData);
        setData(filteredData);
      } else if (route.name === 'Done') {
        const filteredData = todos.filter(todo => todo.done === true);
        setData(filteredData);
      }
      // *************************** END *************************************
    });
  };
... some other methods
...

  return (
    <HideKeyboard>
      <View style={styles.body}>
        <FlatList
          data={data}
          ...other props
          ...
        />
      </View>
    </HideKeyboard>
  );
};

标记区域标记区域的星（*）标记区域显示了我在屏幕上添加的最新和有问题的代码以删除重复。有帮助吗？

Answer 1

这似乎是一个渲染错误。 （在更改选项卡时，组件不会再次呈现）

一个可能的解决方案可以是验证使用效率并设置状态的路由，因此，每当状态更改时，组件将重新渲染
我们将使用该状态在LOADTODOS函数中验证

import React from 'react'

export const LoadTodos = () => {


const [selectedPage, setselectedPage] = useState('Done')


    useEffect(() => {
        if (route.name === 'To-Do' && selectedPage === 'Done'){
            setselectedPage('To-Do')
        }
        if (route.name === 'Done' && selectedPage === 'To-Do'){
            setselectedPage('Done')
        }
        console.log('bruh');
      }, []);


      const loadTodos = () => {
        AsyncStorage.getItem('todos').then(fetchedTodos => {
          const parsedTodos: TodoInterface[] = JSON.parse(fetchedTodos || '[]');
          dispatch(setAllTodo(parsedTodos));
    
          // *************************** START *************************************
          if (selectedPage === 'To-Do') {
            const filteredData = todos.filter(todo => todo.done !== true);
            console.log('aisi', filteredData);
            setData(filteredData);
          } else if (selectedPage === 'Done') {
            const filteredData = todos.filter(todo => todo.done === true);
            setData(filteredData);
          }
          // *************************** END *************************************
        });
      };
  return (
    <HideKeyboard>
      <View style={styles.body}>
        <FlatList
          data={data}
          ...other props
          ...
        />
      </View>
    </HideKeyboard>
  )
}
export default loadTodos

Answer 2

我通过在 loadtodos 方法上用parsedtodos替换TODOS来解决此问题。我想初始渲染时，空的redux商店托多斯（Todos）并未在dispatch上的parsedtodos（setalltodo（parsed））的数据填充。它将空存储转移到了过滤器方法。这就是为什么屏幕空白的原因。我的固定代码：

const loadTodos = async () => {
    const fetchedTodos = await AsyncStorage.getItem('todos');
    const parsedTodos: TodoInterface[] = JSON.parse(fetchedTodos || '[]');
    if (parsedTodos.length !== todos.length) {
      dispatch(setAllTodo(parsedTodos));
    }
    // *************************** START *************************************
    if (route.name === 'To-Do') {
      const filteredData = parsedTodos.filter(todo => todo.done !== true);
      setData(filteredData);
    } else if (route.name === 'Done') {
      const filteredData = parsedTodos.filter(todo => todo.done === true);
      setData(filteredData);
    }
    // *************************** END *************************************
  };