0

这是完整的代码：

import * as React from 'react';
import { View, ScrollView, StyleSheet } from 'react-native';
import {
  Appbar,
  Searchbar,
  List,
  BottomNavigation,
  Text,
  Button,
} from 'react-native-paper';

const AccordionCollection = ({ data }) => {
  var bookLists = data.map(function (item) {
    var items = [];
    for (let i = 0; i < item.total; i++) {
      items.push(
        <Button mode="contained" style={{ margin: 10 }}>
          {i}
        </Button>
      );
    }
    return (
      <List.Accordion
        title={item.title}
        left={(props) => <List.Icon {...props} icon="alpha-g-circle" />}>
        <View
          style={{
            flexDirection: 'row',
            flexWrap: 'wrap',
            alignItems: 'flex-start',
            backgroundColor: 'white',
          }}>
          {items}
        </View>
      </List.Accordion>
    );
  });
  return bookLists;
};

const MusicRoute = () => {
  const DATA = [
    {
      key: 1,
      title: 'Zain dishes',
      total: 21,
    },
    {
      key: 2,
      title: 'Sides',
      total: 32,
    },
    {
      key: 3,
      title: 'Drinks',
      total: 53,
    },
    {
      key: 4,
      title: 'Aesserts',
      total: 14,
    },
  ];
  const [data, setData] = React.useState(DATA);
  const [searchQuery, setSearchQuery] = React.useState('');
  const [sortAZ, setSortAZ] = React.useState(false);

  const onChangeSearch = (query) => {
    setSearchQuery(query);
    const newData = DATA.filter((item) => {
      return item.title.toLowerCase().includes(query.toLowerCase());
    });
    setData(newData);
  };

  const goSortAZ = () => {
    setSortAZ(true);
    setData(
      data.sort((a, b) => (a.title > b.title ? 1 : b.title > a.title ? -1 : 0))
    );
  };

  const goUnSort = () => {
    setSortAZ(false);
    setData(DATA);
  };
  return (
    <View>
      <Appbar.Header style={styles.appBar}>
        <Appbar.BackAction onPress={() => null} />

        <Searchbar
          placeholder="Search"
          onChangeText={onChangeSearch}
          value={searchQuery}
          style={styles.searchBar}
        />

        <Appbar.Action
          icon="sort-alphabetical-ascending"
          onPress={() => goSortAZ()}
        />
        <Appbar.Action icon="library-shelves" onPress={() => goUnSort()} />
      </Appbar.Header>
      <ScrollView>
        <List.Section title="Accordions">
          <AccordionCollection data={data} />
        </List.Section>
      </ScrollView>
    </View>
  );
};

const AlbumsRoute = () => <Text>Albums</Text>;

const MyComponent = () => {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'music', title: 'Music', icon: 'queue-music' },
    { key: 'albums', title: 'Albums', icon: 'album' },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    music: MusicRoute,
    albums: AlbumsRoute,
  });

  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
  );
};

const styles = StyleSheet.create({
  appBar: {
    justifyContent: 'space-between',
  },
  searchBar: {
    width: '60%',
    shadowOpacity: 0,
    borderRadius: 10,
    backgroundColor: '#e4e3e3',
  },
});

export default MyComponent;

世博小吃链接

有两种奇怪的机制。

第一的

如果我删除sortAZ(true)ingoSortAZ()和sortAZ(false)in ，则在您按下 (1) 排序和 (2) 取消排序按钮 3 次以上后goUnSort()，状态将停止更新。data

第二

如果我删除DATA组件外部的数组，排序和取消排序按钮将不起作用/更新。

如果我不删除这两个，我可以对列表进行排序和取消排序。虽然实现了功能，但感觉代码比较乱。

我的问题是：

  • 为什么添加额外状态（sortAZ）有助于更新其他状态（数据）？
4

1 回答 1

0

只需完全删除sortAZ变量（除非您以某种方式想要获得状态，否则无需使用它loading，但由于您没有发出 http 请求，因此没有必要）并替换goSortAZ为以下内容：

请记住克隆原始数组以创建新副本，然后对该副本进行排序。这工作正常。

  const goSortAZ = () => {
    setData(
      [...data].sort((a, b) => (a.title > b.title ? 1 : b.title > a.title ? -1 : 0))
    );
  };

我建议对 unSort 方法也使用相同的技术。

于 2020-07-12T13:54:39.837 回答