React Native-FlatList不渲染 [英] React Native - FlatList Not Rendering

问题描述

(注意:我正在为此应用程序使用Expo)

(Note: I'm using Expo for this app)

我正在尝试渲染显示打印机列表的FlatList.这是代码:

I'm attempting to render a FlatList that displays a list of printers. Here's the code:

<FlatList
  data={printers}
  keyExtractor={printer => printer.id}
  renderItem={({ item }) => {
    return (
      <Printer
        printerTitle={item.name}
        selected={item.selected}
        last={item === last(printers)}
      />
    );
  }}
/>

这是<Printer />组件的代码:

const Printer = props => {
  const { last, printerTitle, selected } = props;
  return (
    <View style={[styles.container, last ? styles.lastContainer : null]}>
      <View style={styles.innerContainer}>
        <View style={styles.leftContainter}>
          {selected ? (
            <Image source={selected ? Images.checkedCircle : null} />
          ) : null}
        </View>
        <View style={styles.printerDetails}>
          <Text style={styles.printerTitle}>{printerTitle}</Text>
        </View>
      </View>
    </View>
  );
};

...

export default Printer;

我似乎无法获得<Printer />组件进行渲染.我尝试在renderItem道具中包含一个类似的自定义组件(该组件在应用程序的另一部分中的FlatList中起作用)，但也不起作用.

I can't seem to get the <Printer /> component to render. I have tried including a similar custom component (that has worked in a FlatList in another part of the app) in the renderItem prop, and it doesn't work either.

但是，当我将<Printer />组件替换为<Text>{item.name}</Text>组件时，打印机名称将呈现出我期望的样子.

However, when I replace the <Printer /> component with <Text>{item.name}</Text> component, the printer name renders like I would expect it to.

有人有没有遇到过这个问题，或者有人有解决方案吗?

Has anyone run into this issue before, or does anyone have a solution?

推荐答案

在我的情况下，我正在为列表中的每个项目渲染一个自定义组件，但未渲染是因为我不小心将{}返回renderItem道具的一部分而不是().

In my case, where I'm rendering a custom component for each item in the list, it wasn't rendering because I accidentally had {} surrounding the return part of the renderItem prop instead of ().

更改:

<FlatList
  data={array}
  renderItem={({item, index}) => { <CustomItemComponent /> }}
/>

对此:

<FlatList
  data={array}
  renderItem={({item, index}) => ( <CustomItemComponent /> )}
/>

解决了我的问题.

这篇关于React Native-FlatList不渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！