Gewusst wie: filtern von Daten im ListView Reagieren-native?

Ich versuche, meine filter array-Objekt-Liste und dann versucht, die Anzeige in der ListView mit neuer Datenquelle. Die Liste ist jedoch nicht immer gefiltert. Ich weiß, dass meine filter-Funktion ordnungsgemäß funktioniert. ( Ich habe es in die Konsole.log )

Bin ich mit Redux map, meinen Zustand zu stützen. Und dann versuchen zu filtern prop. Ist das der falsche Weg?

Hier ist mein code:

/*global fetch:false*/
import _ from 'lodash';
import React, { Component } from 'react';
import { ListView, Text as NText } from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import {
  Container, Header, Item,
  Icon, Input, ListItem, Text,
  Left, Right, Body, Button
} from 'native-base';


import Spinner from '../common/Spinner';
import HealthImage from '../misc/HealthImage';
import { assetsFetch } from '../../actions';

const ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2
});

class AssetsList extends Component {
  componentWillMount() {
    this.props.assetsFetch();

    //Implementing the datasource for the list View
    this.createDataSource(this.props.assets);
  }

  componentWillReceiveProps(nextProps) {
    //Next props is the next set of props that this component will be rendered with.
    //this.props is still equal to the old set of props.
    this.createDataSource(nextProps.assets);
  }

  onSearchChange(text) {
    const filteredAssets = this.props.assets.filter(
      (asset) => {
        return asset.name.indexOf(text) !== -1;
      }
    );

    this.dataSource = ds.cloneWithRows(_.values(filteredAssets));
  }

  createDataSource(assets) {
    this.dataSource = ds.cloneWithRows(assets);
  }


  renderRow(asset) {
    return (
      <ListItem thumbnail>
          <Left>
              <HealthImage health={asset.health} />
          </Left>
          <Body>
              <Text>{asset.name}</Text>

              <NText style={styles.nText}>
                Location: {asset.location} |
                Serial: {asset.serial_number}
              </NText>
              <NText>
                Total Samples: {asset.total_samples}
              </NText>

          </Body>
          <Right>
              <Button transparent onPress={() => Actions.assetShow()}>
                  <Text>View</Text>
              </Button>
          </Right>
      </ListItem>
    );
  }



  render() {
    return (
     <Input
                  placeholder="Search"
                  onChangeText={this.onSearchChange.bind(this)}
                />
        <ListView
          enableEmptySections
          dataSource={this.dataSource}
          renderRow={this.renderRow}
        />


    );
  }
}

const mapStateToProps = state => {
  return {
    assets: _.values(state.assets.asset),
    spinner: state.assets.asset_spinner
  };
};

export default connect(mapStateToProps, { assetsFetch })(AssetsList);

Was mache ich hier falsch?

InformationsquelleAutor Sankalp Singha | 2017-03-07
  1. 6

    Es ist ein wenig schwer zu Folgen, was hier Los ist. Ich würde es vereinfacht werden, etwa so:

    class AssetsList extends Component {
  state = {};

  componentDidMount() {
    return this.props.assetsFetch();
  }

  onSearchChange(text) {
    this.setState({
      searchTerm: text
    });
  }

  renderRow(asset) {
    return (
      <ListItem thumbnail>
          <Left>
              <HealthImage health={asset.health} />
          </Left>
          <Body>
              <Text>{asset.name}</Text>

              <NText style={styles.nText}>
                Location: {asset.location} |
                Serial: {asset.serial_number}
              </NText>
              <NText>
                Total Samples: {asset.total_samples}
              </NText>

          </Body>
          <Right>
              <Button transparent onPress={() => Actions.assetShow()}>
                  <Text>View</Text>
              </Button>
          </Right>
      </ListItem>
    );
  }

  getFilteredAssets() {

  }

  render() {
    const filteredAssets = this.state.searchTerm
      ? this.props.assets.filter(asset => {
          return asset.name.indexOf(this.state.searchTerm) > -1;
        })
      : this.props.assets;
    const dataSource = ds.cloneWithRows(filteredAssets);
    return (
     <Input
                  placeholder="Search"
                  onChangeText={this.onSearchChange.bind(this)}
                />
        <ListView
          enableEmptySections
          dataSource={dataSource}
          renderRow={this.renderRow}
        />
    );
  }
}

const mapStateToProps = state => {
  return {
    assets: _.values(state.assets.asset),
    spinner: state.assets.asset_spinner
  };
};

export default connect(mapStateToProps, { assetsFetch })(AssetsList);

    Ein paar Punkte:

    1. Die Komponente zustandsbehaftet ist. Es ist ein Stück Staat, der gehört nur auf die Komponente: der Suchbegriff. Halten, dass in Komponente Zustand.
    2. Nicht ändern Sie die data source im Lebenszyklus Funktionen. Tun es der Letzte Punkt, den Sie wissen, dass es gebraucht wird: in "Rendern".
    3. Ich vermute, dass es etwas async in assetFetch, so sollten Sie sich vielleicht zurück in componentDidMount.
    4. Wechselte ich von componentWillMount zu componentDidMount. Es ist zu empfehlen, async Holen componentDidMount. Dies kann die Sache, wenn Sie jemals tun, server-side-rendering.
    5. Überspringen filtern, wenn es kein Begriff. Dies wäre nur von Belang, wenn die Liste sehr groß werden.

    Eine Sache, ich habe eine kleine Sorge mit, ist das Muster von abrufen innerhalb einer Komponente, indem es in globalen Zustand, und dann unter Berufung auf diese Komponente zu reagieren, um den globalen Zustand zu ändern. Damit verändernden globalen Zustand wird ein Nebeneffekt der einfach betrachten etwas. Ich nehme an, Sie tun es, weil assets ist an anderer Stelle verwendet, und dies ist eine bequeme Punkt zu erfrischen diese von dem server, so dass Sie zeigen sich in anderen Komponenten, die nicht Sie zu Holen. Diese Muster können in der Folge schwer zu findende Fehler.

    • Es funktioniert!! Vielen, vielen Dank!! Alles was ich tun musste, war die Einrichtung der ursprüngliche Zustand im Konstruktor für den text. 🙂 Danke, Tim!
    • Ach ja, richtig. Sonst dem Staat selbst ist nicht definiert. Froh, dass es funktioniert.
    • Ich aktualisierte die Antwort. Statt der Konstruktor verwendet, ich ES7 Eigenschaft setter.
    InformationsquelleAutor Tim Scott
  2. 0

    Müssen Sie tun setState auslösen machen. Hier ist, wie ich es tun würde -

    constructor(props) {
  super(props);
  this.ds = new ListView.DataSource({ rowHasChanged: (r1,r2) => r1 !== r2 });
  this.state = {
    assets: []
  };
}

componentWillMount() {
  this.props.assetsFetch();
  this.setState({
    assets: this.props.assets
  });
}

componentWillReceiveProps(nextProps) {
  this.setState({
    assets: nextProps.assets
  });
}

onSearchChange(text) {
  const filteredAssets = this.props.assets.filter(asset => asset.name.indexOf(text) !== -1);
  this.setState({
    assets: _.values(filteredAssets)
  });
}


render() {
  ...
  <ListView
    dataSource={this.ds.cloneWithRows(this.state.assets)}
    .....
  />
}
    • Aber ich bin mit redux die Verwaltung meines Staates. Denkst du, dass dies die Methode, dies zu tun? Ich dachte, wir waren nicht erlaubt, um den Status zu ändern, aus der Ebene der Komponenten für redux.
    • Haben Sie problem mit nur onSearchChange Recht?
    • Ist dies nicht der richtige Weg, diesen Ansatz in einer Redux situation. Sie Fragen mich, um zu ändern, wie ich mit meinem Zustand aus der Ebene der Komponenten mit Aktionen und Disponenten.
    • Das problem mit dieser Antwort ist, dass, wenn der Benutzer die Suche, bevor assetFetch beendet ist, wird der such-Begriff nicht angewendet werden.
    InformationsquelleAutor vinayr
Schreibe einen Kommentar