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屋！