фильтровать список с помощью приставки - реагировать на родную

Question

У меня есть следующий код, который фильтрует по имени в строке поиска.

state = {
    canchas,
    canchasFiltradas: [],
  }

  componentDidMount () {
    this.setState({canchasFiltradas: this.state.canchas})
  }

  buscarCanchas = (name) => {
    this.setState({
      canchasFiltradas: this.state.canchas.filter(cancha => {
        return cancha.name.indexOf(name) > -1
      })
    })
  }

Где canchas ссылается на файл json.Это компонент панели поиска:

<SearchBar
    onChangeText={nombre =>  this.buscarCanchas(nombre)}
    onClearText={() => this.setState({canchas})}
/>

Теперь я добавил в проект избыточность, и она не работает.Это код редуктора:

const initialState = {
    canchas,
    canchasFiltradas: [],
};

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case BUSCAR_CANCHA:
            return {
                ...state,
                canchas: state.canchas.filter(cancha => {
                    return cancha.name.indexOf(action.name) > -1
                })
            };
        default:
            return state;
    }
};

Answer 1

Вы перезаписываете исходное значение состояния в вашем редукторе.Вот почему он не показывает все, когда вы очищаете поиск.Вы должны хранить отфильтрованные данные в canchasFiltradas вместо canchas.

См. Ниже:

const initialState = {
    canchas,
    canchasFiltradas: [],
};

const reducer = (state=initialState, action) => {
    switch (action.type) {
        case BUSCAR_CANCHA:
            return {
                ...state,
                canchasFiltradas: state.canchas.filter(cancha => {
                    return cancha.name.indexOf(action.name) > -1
                })
            };
        default:
            return state;
    }
};