React Native FlatList 組件沒有渲染我的數組

Question

所以，我正在嘗試使用 react-native 制作一個應用程序，我需要一個列表，我正在使用 FlatList。 當我使用console.log（）時，問題似乎出在保存中（我在不同的文件（屏幕）中保存和檢索，這可能是問題嗎？）。我從異步存儲中獲取我的數組：

try {
  if ((await AsyncStorage.getItem("DA")) !== null) {
    DUES = JSON.parse(await AsyncStorage.getItem("DA"));
    Works = JSON.parse(await AsyncStorage.getItem("WA"));
    await AsyncStorage.removeItem("DA");
    await AsyncStorage.removeItem("WA");
  }
  if ((await AsyncStorage.getItem("DUES")) !== null) {
    DUES.push(await AsyncStorage.getItem("DUES"));
    Works.push(await AsyncStorage.getItem("Info"));
    await AsyncStorage.removeItem("DUES");
    await AsyncStorage.removeItem("Info");
  }
  await AsyncStorage.setItem("DA", JSON.stringify(DUES));
  await AsyncStorage.setItem("WA", JSON.stringify(Works));
} catch (err) {
  console.log(err);
}

我需要在列表中顯示它，但沒有任何渲染。 清單代碼：

<FlatList>
      data={Works}
      renderItem=
      {() => {
        <Card>
          <Text>{Works[i]}</Text>
          <Text>Due: {DUES[i]}</Text>
        </Card>;
        i++;
      }}
</FlatList>

保存腳本：

      onPress={async () => {
        try {
          await AsyncStorage.multiSet([
            ["DUES", D],
            ["Info", Title],
          ]);
          console.log("DONE2");
          Alert.alert("Saved!");
        } catch (err) {
          console.log(err);
        }
      }}

這可能是因為我錯過了“鑰匙”，但 idk。 我應該如何解決這個問題？，並使其呈現列表。 有一個更好的方法嗎？

Answer 1

這是因為您沒有返回需要在 FlatList 組件的 renderItem 方法中打印出來的元素。 而是試試這個：

<FlatList>
      data={Works}
      renderItem=
      {({ item, index }) => {
        return (
          <Card>
            <Text>{item}</Text>
            <Text>Due: {DUES[index]}</Text>
          </Card>
        );
      }}
</FlatList>

Answer 2

你應該這樣做：

try {
  const [da, work] = await Promise.all([
    AsyncStorage.getItem("DA"),
    AsyncStorage.getItem("WA")
  ]);

  if (da !== null) {
    DUES = JSON.parse(da);
    Works = JSON.parse(work);
  }

  const [dues, info] = await Promise.all([
    AsyncStorage.getItem("DUES"),
    AsyncStorage.getItem("Info")
  ]);

  if (dues !== null) {
    DUES.push(dues);
    Works.push(info);

    await AsyncStorage.removeItem("DUES");
    await AsyncStorage.removeItem("Info");
  }

  await Promise.all([
    AsyncStorage.setItem("DA", JSON.stringify(DUES)),
    AsyncStorage.setItem("WA", JSON.stringify(Works))
  ]);
} catch (err) {
  console.log(err);
}

然后你的清單：

<FlatList>
      data={Works}
      renderItem={({item, index}) => {
        return <Card>
          <Text>{item}</Text>
          <Text>Due: {DUES[index]}</Text>
        </Card>;
      }}
</FlatList>

我猜你也可以將會費和工作組合成一個單一的 object 數組。