React Native: Как справиться с устареванием методов жизненного цикла с ListView? - PullRequest
Новая
       23

React Native: Как справиться с устареванием методов жизненного цикла с ListView?

0 голосов
/ 26 июня 2018

Я сейчас изучаю React Native. Я хочу написать ListView. В учебнике, которому я следую, используется устаревший метод componentWillMount, который теперь называется UNSAFE_componentWillMount. Я погуглил людей, которые сказали, что этот метод следует заменить на componentDidMount. Моя проблема в том, что когда я добавляю этот метод в свой код, приложение разрывается.

Вот код: 

/* @flow */

import React, { Component } from "react";
import { ListView } from "react-native";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import ListItem from "./ListItem";

class LibraryList extends Component {
  componentDidMount = () => {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = ds.cloneWithRows(this.props.libraries);
  };

  renderRow = library => <ListItem library={library} />;

  render() {
    return <ListView dataSource={this.dataSource} renderRow={this.renderRow} />;
  }
}

LibraryList.propTypes = {
  libraries: PropTypes.array
};

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

export default connect(mapStateToProps)(LibraryList);

А вот и сообщение об ошибке, которое я получаю TypeError: Cannot read property 'rowIdentities' of undefined. Какой метод я должен использовать здесь, или как я могу это исправить?

1 Ответ

0 голосов
/ 27 июня 2018

Я решил проблему с помощью FlatList. Я обнаружил, что ListView устарел :) Вот код, который я использовал в итоге: 

/* @flow */

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

class LibraryList extends Component {
  state = {
    dataSource: []
  };
  componentDidMount = () => {
    this.setState({ dataSource: this.props.libraries });
  };

  renderRow = ({ item: library }) => <ListItem library={library} />;

  render() {
    return (
      <FlatList
        data={this.state.dataSource}
        renderItem={this.renderRow}
        keyExtractor={item => item.id.toString()}
      />
    );
  }
}

LibraryList.propTypes = {
  libraries: PropTypes.array
};

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

export default connect(mapStateToProps)(LibraryList);
...