Reactjs 无法读取的属性。包括未定义-反应

我正在尝试映射此数组，但它一直说的

.includes未定义。我想这可能是因为我映射错了？我不确定，但我会列出我所有的东西

以下是当我从redux应用商店
console.log（this.props.tournaments
中读取api数据时，api数据的样子：

您可以在数组的第一个索引中看到
未定义的
，我使用了
对象.keys（tournaments）.map（key=>tournaments[key]）
和
.map
（您可以在下面的组件代码段中看到）两次，当I console.log时，我得到了正确的结果，但当它通过
.filter
函数时，我仍然得到一个错误

以下是格式化阵列后的外观：

但我还是有个错误

这就是我得到的错误：


下面是有问题的组件：

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

我认为您可以先处理response.data，然后再将其设置为state，以反映您将如何处理应用程序。我认为您更希望拥有一个对象数组

您可以尝试传递到payload
Object.values（response.data）.flat（）
，它将根据您的响应为您提供一个对象数组

编辑
下面没有实现
Object.values（response.data）.flat（）
。如果您按照建议进行操作，则不需要处理

关于筛选器上的问题，
item
是一个数组，在索引0处包含名称值。这就是未定义的原因。发生这种情况是因为
tore.map（room=>room.name）
返回一个数组

如果您按以下方式进行更改，您可能会获得您的Tourn阵列：

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

<>但是我会考虑在组件级别上避免所有这些更改的响应。选择一个更适合你的。
 我认为你可以在设置状态之前对你的响应进行处理。以反映你将如何处理你的应用程序。我想你宁愿拥有一个对象数组。

您可以尝试传递到payload
Object.values（response.data）.flat（）
，它将根据您的响应为您提供一个对象数组

编辑
下面没有实现
Object.values（response.data）.flat（）
。如果您按照建议进行操作，则不需要处理

关于筛选器上的问题，
item
是一个数组，在索引0处包含名称值。这就是未定义的原因。发生这种情况是因为
tore.map（room=>room.name）
返回一个数组

如果您按以下方式进行更改，您可能会获得您的Tourn阵列：

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

<>但是我会考虑在组件级别上避免所有这些更改。选择一个更适合你的。< /P>我添加了<代码>对象。值（响应。数据）。（）（代码）>动作和添加<代码>让Tuns=这个。道具。比赛。地图（TROR= =（{Name：Turr（0）.Name }））

但唯一的问题是，它只检索名字，我希望它根据搜索标准检索名字。我看到了，我编辑了我的答案。我认为你应该选择一种方法。或者你立即处理你的回答（我认为这更有意义），或在组件上执行这些操作。如果在数组数组中调用flat，则将获得一个锦标赛数组。如果仍然失败，请告诉我我已将

对象.values（response.data）.flat（）

添加到操作中，并添加了

let tourns=this.props.tournaments.map（tore=>（{name:tore[0].name}））

但唯一的问题是，它只检索名字，我希望它根据搜索标准检索名字。我看到了，我编辑了我的答案。我认为你应该选择一种方法。或者你立即处理你的回答（我认为这更有意义），或在组件上执行这些操作。如果您在阵列阵列上调用flat，则您将获得一系列锦标赛。如果仍然失败，请告诉我