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

Question

我对本机和 redux 做出反应还很陌生，并试图使用 redux 从 JSON 文件中的平面列表中呈现库标题，但我的 FlatList 组件不会在屏幕上呈现任何内容。 这是我的代码：

LibraryList.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);

ListItem.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;

App.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 称为arrow function inside render，如下所示

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

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

希望这对您有所帮助。如有疑问，请随意。

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 proprenderItem 会返回给你的函数一个具有这种结构的对象

{ item, index }

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

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