Question

    <FlatList
      data={this.state.data}
      keyExtractor={(x, i) => i.toString()}
      console.log('Hi from React Native')


      renderItem={({ item }) =>
        <Text>
          {`${item.name.first} ${item.name.last}`}
        </Text>
        }         
    />

这是我正在执行console.log的函数示例，但是VSCode的“调试控制台”中没有任何显示。我知道一切都在运行，并且组件很可能安装了，因为我能够在设备上的Expo客户端应用程序上查看我的应用程序。我收到一个错误消息，说“已确定预期”。

我也不确定keyExtractor在做什么。

Answer 1

首先，您不能在此处使用console.log语句，FlatList需要该位置的道具列表。您可以将log语句放在JavaScript代码块中。

第二，要使用VSCode的调试器，必须首先将其附加到打包程序。你做完了吗？您将需要相关的VSCode扩展。 here和here提供了一些有关如何执行此操作的帮助；这是一个单独的问题。您只需在应用中启用JS调试，就可以简单地使用Google Chrome浏览器作为替代。（在您的应用中，打开开发人员菜单，然后点击Debug JS Remotely。然后在打开的Google Chrome窗口中，右键单击> Inspect> Console）。

最后，renderItem是一个FlatList道具，它呈现列表中的每个单独项目。您可以使用其样式或修改FlatList中的每个项目。

使用VSCode的React Native应用程序-为什么我看不到任何console.logs？

1 个答案: