Вопрос по react-native, redux, javascript, reactjs – Проблема с этим ответом состоит в том, что если пользователь вводит поиск до завершения assetFetch, условие поиска не будет применено.

5

аюсь отфильтровать список объектов массива, а затем пытаюсь отобразить его в ListView с новым источником данных. Тем не менее, список не фильтруется. Я знаю, что моя функция фильтра работает правильно. (Я проверил это в console.log)

Я использую Redux для сопоставления своего состояния с подпоркой. А потом пытаюсь отфильтровать опору. Это неправильный путь?

Вот мой код:

/*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);

Что я здесь не так делаю?

Ваш Ответ

2   ответа
6

Немного сложно следить за тем, что здесь происходит. Я бы упростил это так:

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

Несколько моментов:

Ваш компонент с состоянием. Существует одна часть состояния, которая принадлежит только компоненту: поисковый термин. Держите это в состоянии компонента.Не меняйте источник данных в функциях жизненного цикла. Сделайте это в последний момент, который вам нужен: в рендере.Я предполагаю, что есть что-то асинхронное вassetFetchтак что вы, вероятно, должны вернуть его вcomponentDidMount.Я изменился сcomponentWillMount вcomponentDidMount, Рекомендуется поставить асинхронную выборкуcomponentDidMount, Это может иметь значение, если вы когда-нибудь выполняете рендеринг на стороне сервера.Пропустить фильтрацию, если поискового запроса нет. Это имеет значение, только если список очень большой.

Одна вещь, с которой я немного беспокоюсь, это шаблон извлечения внутри компонента, перевода его в глобальное состояние и последующего использования этого компонента для реагирования на глобальное изменение состояния. Таким образом, изменение глобального состояния становится побочным эффектом простого просмотра чего-либо. Я полагаю, вы делаете это, потому чтоassets используется в другом месте, и это удобно для того, чтобы освежить их с сервера, чтобы они отображались в других компонентах, которые их не выбирают. Этот шаблон может привести к труднодоступным ошибкам.

Я обновил ответ. Вместо конструктора я использовал установщик свойств ES7. Tim Scott
О верно. В противном случае само состояние не определено. Рад, что это работает. Tim Scott
Оно работает!! Огромное спасибо!! Все, что мне нужно было сделать, это установить начальное состояние в конструкторе для текста. :) Спасибо, Тим! Sankalp Singha
0

Вам нужно сделатьsetState вызвать рендер. Вот как бы я это сделал -

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)}
    .....
  />
}
Проблема с этим ответом состоит в том, что если пользователь вводит поиск до завершения assetFetch, условие поиска не будет применено. Tim Scott
Это не правильный подход к этому в ситуации с Redux. Вы просите меня изменить способ обработки моего состояния с уровня компонентов с помощью действий и диспетчеров. Sankalp Singha
У вас есть проблемы только сonSearchChange право? vinayr
Но я использую избыточность, чтобы управлять своим состоянием. Вы думаете, что это способ сделать это? Я думал, что нам вообще не разрешали менять состояние с уровня компонентов для редукса. Sankalp Singha

Похожие вопросы