在React Native中我们可以为Sectionlist中的多个对象只打印一个标头吗?

问题描述 投票:0回答:0

我正在尝试创建一个根据日期划分项目的列表。为了实现这一目标,我计划使用 React 本机库中的部分列表。我还提取并修改了我的数据,看起来像这样,

[{"data": [[Object]], "date": "23th July 2023"}, {"data": [[Object]], "date": "24th July 2023"}, {"data": [[Object]], "date": "24th July 2023"}, {"data": [[Object]], "date": "24th July 
2023"}]

这里的[对象]类似于,

[{name: 'pizza', amount: '100', category: 'food', date:'2023-7-24 7:59:37'}]

这里的日期属性可能会有所不同。我使用 sqlite3 中的 CURRENT_TIMESTAMP 将其输入到我的表中,然后使用 SELECT 来提取它。

我想为具有相同日期属性的多个对象创建一个节标题。相反,目前,我的代码为每个对象创建不同的节标题。我想最好通过不完全修改数据来实现这一点。到目前为止我的代码看起来像这样,

const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];

const HomeScreen = () => {

  //Fetching data from expenses table in GastoCalc.db and optimizing it to make it more useable
  const [expenses, setExpenses] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const Data = await getExpenses();
  
        const temp = Data.map((data) => {
          const key = new Date(data.date)
            return {
              date: key.getDate() + "th " + month[key.getMonth()] + ' ' + key.getFullYear(),
              data: [data]
            }
        })
        setExpenses(temp);
      } catch (error) {
        console.log("Error retrieving expenses:", error);
      }
    };
    fetchData();
  }, []);


  // Render function to render items from the data
  const render = ({ item }) => {
    return (
      <View style={styles.listitem}>
        <Text>{item.name}</Text>
        <Text>{item.amount}</Text>
        <Text>{item.category}</Text>
      </View>
    );
  };

  // Render function to render header from the data
  const renderSectionHeader = ({ section }) => {

    return (
      <View>
        <Text>{ section.date }</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <SectionList 
      sections={expenses}
      keyExtractor={(item, index) => item.date + '-' + index }
      renderItem={render}
      renderSectionHeader={renderSectionHeader}
      />
    </View>
  );
};

我做了一些研究,并通过 ChatGPT(ik 不是最好的方法)发现,如果不同对象的节键(在本例中为日期属性)相同,那么它们将被分组在同一节标题下,但这似乎对我不起作用。我的猜测之一是它不起作用,因为我正在使用 Expo Go,但我在这里可能是错的。这就是为什么我的日期属性看起来像现在这样的原因之一。

我还想过通过在另一个数据变量/状态中组合具有相同日期的对象来完全更改我传递给节列表的数据,但我不确定如何正确实现它,并想尝试找到更好的方法。其次,我不想更改数据的原因是因为我打算在编辑数据库时使用相同的数据。我将使列表中的每个项目都成为可触摸的,单击该项目后,您将可以编辑或从数据库中删除该条目。如果我改变它,那么我将需要想出一些其他方法来实现相同的目的。

非常感谢任何帮助。

javascript react-native javascript-objects react-native-sectionlist
© www.soinside.com 2019 - 2024. All rights reserved.