Не могу прочитать свойство .includes undefined - реагировать - PullRequest
Новая
       56

Не могу прочитать свойство .includes undefined - реагировать

1 голос
/ 20 июня 2020

Я пытаюсь отобразить этот массив, но он продолжает говорить .includes is undefined. Я предполагаю, что это потому, что я неправильно нанес на карту? Я не уверен, но перечислю все, что у меня есть.

Вот как выглядят мои данные api, когда я console.log(this.props.tournaments их из моего хранилища redux: console.log

Вы видите undefined в первом индексе массива, я использовал Object.keys(tournaments).map(key => tournaments[key]) и .map (которые вы можете видеть в фрагменте компонента ниже) дважды, и когда я console.log я получаю правильные результаты, но я все равно получаю сообщение об ошибке, когда он проходит через функцию .filter.

Вот как это выглядит после форматирования массива: console.log после форматирования

, но я все еще получаю сообщение об ошибке ...

Это сообщение об ошибке:

Сообщение об ошибке

Вот компонент, о котором идет речь: 

import React from 'react';
import { connect } from 'react-redux';
import { fetchTournaments } from '../actions/tournaments';

class Search extends React.PureComponent {
  // State only needs to hold the current filter text value:

  componentDidMount() {
    this.props.fetchTournaments();
  }

  state = {
    filterText: ''
  };

  handleChange = event => {
    this.setState({ filterText: event.target.value });
  };

  render() {

    let tourns = this.props.tournaments.map(tore =>
      tore.map(room => room.name)
    );

    console.log(tourns, 'here');
    const filteredList = tourns.filter(item =>
      item.name.includes(this.state.filterText)
    );

    return (
      <React.Fragment>
        <input onChange={this.handleChange} value={this.state.filterText} />
         <ul>{filteredList.map(item => <li key={item.id}>{item.name}</li>)}</ul>
      </React.Fragment>
    );
  }
}

function mapStateToProps({ tournaments }) {
  return {
    tournaments: Object.keys(tournaments).map(key => tournaments[key])
  };
}

export default connect(mapStateToProps, {
  fetchTournaments
})(Search);

Мои данные поступают из редукции следующим образом: Редуктор: 

import _ from 'lodash';

import {
  FETCH_TOURNAMENT,
 from '../actions/types';

export default (state = {}, action) => {
  switch (action.type) {
    case FETCH_TOURNAMENT:
      return { ...state, [action.payload.id]: action.payload };
    default:
      return state;
  }
};

действие: 

import {
  FETCH_TOURNAMENT,
} from './types';

import { API_TOURNAMENTS_URL } from '../constants/api';
import axios from 'axios';

export const fetchTournament = id => async dispatch => {
  const response = await axios.get(`http://localhost:4000/tournaments/${id}`);

  dispatch({ type: FETCH_TOURNAMENT, payload: response.data });
};

1 Ответ

0 голосов
/ 21 июня 2020

Я думаю, вы могли бы обработать свой response.data перед установкой состояния, чтобы больше отразить, как вы будете обрабатывать свое приложение. Я предполагаю, что вы предпочли бы иметь массив объектов.

вместо этого вы можете попробовать передать полезную нагрузку Object.values(response.data).flat(), которая даст вам массив объектов на основе вашего ответа.

Изменить

ниже без реализации Object.values(response.data).flat(). если вы последуете предложению, вам не нужно рассматривать

о проблеме с фильтром, item - это массив, содержащий значение имени с индексом 0. Вот почему вы получите undefined. это происходит из-за того, что tore.map(room => room.name) возвращает массив.

если вы измените, как показано ниже, вы можете получить свой массив турниров: 

let tourns = this.props.tournaments.flat();

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

...