FlatList 不会在 react-native 中呈现任何文本

Question

我对原生和 redux 反应FlatList ，并试图使用 redux 从平面列表中的 JSON 文件呈现库标题，但我的FlatList组件没有在屏幕上呈现任何内容。 这是我的代码：

库列表.js

import React, { Component } from "react";
import { FlatList } from "react-native";
import { connect } from "react-redux";
import ListItem from "./ListItem";

class LibraryList extends Component {

  renderItem(library) {
    return <ListItem library={library} />;
  }

  render() {
    return (
      <FlatList
        data={this.props.libraries}
        renderItem={this.renderItem}
        keyExtractor={library => library.id}
      />
    );
  }
}

const mapStateToProps = state => {
  return { libraries: state.libraries };
};

export default connect(mapStateToProps)(LibraryList);

列表项.js

import React, { Component } from "react";
import { Text } from "react-native";
import { CardSection } from "./common";

class ListItem extends Component {
  render() {
    return (
      <CardSection>
        <Text>{this.props.library.title}</Text>
      </CardSection>
    );
  }
}
export default ListItem;

应用程序.js

import React from "react";
import { View } from "react-native";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./reducers";
import { Header } from "./components/common";
import LibraryList from "./components/LibraryList";

const App = () => {
  return (
    <Provider store={createStore(reducers)}>
      <View>
        <Header headerText="Tech Stack" />
        <LibraryList />
      </View>
    </Provider>
  );
};

export default App;

JSON 文件就像

[
    {
        "id": '' ,
        "title": '' ,
        "description":''
    },
    {
        "id":'' ,
        "title":'' ,
        "description":''
    }
]

我为此阅读了一些解决方案，建议将renderItem函数更改为这样的

renderItem = ({ library }) => <ListItem library={library} />

仍然不起作用。 有人可以帮我解决这个问题吗？

谢谢。

Answer 1

您必须将renderItem作为箭头函数。 否则，您必须在构造函数中绑定您的函数，以便将函数作为renderItem={this.renderItem} 。

import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component {

    renderItem = ({ item }) => {
        return <ListItem library={item} />
    }

    render() {
        return (
            <FlatList
                data={this.props.libraries}
                renderItem={this.renderItem}
                keyExtractor={library => library.id}
            />
        );
    }
}

const mapStateToProps = state => {
    return { libraries: state.libraries };
};

export default connect(mapStateToProps)(LibraryList); 

或者你可以调用你的renderItem作为渲染内部的箭头函数，如下所示

renderItem={(item) => this.renderItem(item)}

但是在每次渲染组件时，在 render 中使用箭头函数都会创建一个新函数，这可能会破坏基于严格标识比较的优化。

希望这对你有帮助。 如有疑问，请放心。

Answer 2

在你的平面列表中试试这个：

<FlatList
             data={this.props.libraries}
 renderItem={({item, index}) => {
            this.renderItems(item); // change this name to renderItems so that it doesnt clash with flatlist default renderItem
          }}

/>

希望能帮助到你。 随意怀疑

Answer 3

您有几种方法可以解决您的问题。

首先你的 renderItem 应该被绑定，所以要么这样做

renderItem = (library) => {

或这个

renderItem={this.renderItem.bind(this)}

除了绑定问题，flatlist prop renderItem 将返回给你的函数一个具有这种结构的对象

{ item, index }

所以实际上你的 renderItem 应该是这样的

renderItem({ item }){
    return <ListItem library={item} />;
}