FlatList не отображает текст на реагирующем

Question

Я довольно новичок, чтобы реагировать на native и redux и пытался отобразить заголовок библиотеки из файла JSON в плоский список с использованием redux, но мой компонент 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;

Приложение. 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 как функцию стрелки внутри render , как показано ниже

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

, но при использовании функции стрелки в рендере каждый раз при рендеринге компонента создается новая функция, которая может нарушить оптимизацию на основе строгого сравнения идентификаторов.

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

Answer 2

У вас есть несколько подходов к вашей проблеме.

Во-первых, ваш renderItem должен быть связан, поэтому либо сделайте это

renderItem = (library) => {

или это

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

помимо проблема связывания, flatlist prop renderItem вернет в вашу функцию объект с этой структурой

{ item, index }

, так что в действительности ваш renderItem должен быть таким

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

Answer 3

В вашем плоском списке попробуйте следующее:

<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
          }}

/>

Надеюсь, это поможет. не стесняйтесь сомнений