Javascript React本机FlatList组件未呈现我的阵列

所以，我正在尝试使用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>

---

这可能是因为我丢失了“钥匙”，但是idk。我应该如何修复此问题？并使其呈现列表。有更好的方法吗？

这是因为在FlatList组件的renderItem方法中没有返回需要打印的元素。 相反，请尝试以下方法：

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

数据={Works}
伦德雷特=
{（{item，index}）=>{
返回(
{item}
到期：{DUES[index]}
);
}}

您应该这样做：

试试看{
const[da，work]=等待承诺([
AsyncStorage.getItem（“DA”），
AsyncStorage.getItem（“WA”）
]);
如果（da！==null）{
DUES=JSON.parse（da）；
Works=JSON.parse（work）；
}
const[费用，信息]=等待承诺([
AsyncStorage.getItem（“应付款”），
AsyncStorage.getItem（“信息”）
]);
如果（应付款！==null）{
费。推（费）；
推送（信息）；
等待AsyncStorage.removeItem（“应付款”）；
等待AsyncStorage.removeItem（“信息”）；
}
等待承诺([
AsyncStorage.setItem（“DA”，JSON.stringify（DUES）），
AsyncStorage.setItem（“WA”，JSON.stringify（Works））
]);
}捕捉（错误）{
控制台日志（err）；
}

那么你的名单是：

数据={Works}
renderItem={（{item，index}）=>{
返回
{item}
到期：{DUES[index]}
;
}}

---

我想，你也可以将会费和工作合并到一个对象类型的数组中。

你应该使用

renderItem={（{item，index}=>…}

（

item

已经是

Works[I]

了，不需要手动增加

I

）；这基本上与使用

Array.map

在React中呈现列表时一样，请参阅文档：阅读

works

后是否正确使用

setState

？因为这就是React的工作原理：应用程序在状态更改后重新呈现。如果

Works

以空数组开始，则除非调用

this.setState（{Works:…}），否则列表将永远不会出现（{item，index}）

Hmm，我会测试它。嗯，不，不起作用，似乎保存有问题，似乎数组存在（日志记录）。我会尝试，谢谢：）对不起，但是回答这个问题是没有意义的，因为OP没有使用

状态

；据我们所知，OP展示的代码在理论上可能工作得非常好。

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