数组的第一个值未定义

Question

我正在尝试从我的 redux 映射一些数据，但我的数组的第一个值是未定义的，我不确定如何克服它，因为它不是一个数组，它只在第 26 行显示<div>sdasd</div>。

谁能告诉我该怎么做？

这是我正在使用的代码：

import '../styles/Item.css';
import { connect } from 'react-redux';
import { fetchTournaments } from '../actions/tournaments';
import Item from './Item';

class List extends React.Component {
componentDidMount() {
  this.props.fetchTournaments();
}

renderList() {
  let data = this.props.tournaments;
  const array = Object.keys(data).map(key => data[key]);
  return array.map(tournament => {
    return Array.isArray(tournament.organizer) ? (
      <Item organizer={tournament.organizer} />
    ) : (
      <div>sdasd</div>
    );
  });
}

render() {
  console.log(this.props.tournaments);
  return <div>{this.renderList()}</div>;
}
}

const mapStateToProps = state => {
return {
  tournaments: state.tournaments
};
};

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

这里是 redux 操作：

import rooms from '../constants/api';

export const fetchTournaments = () => async dispatch => {
  const response = await rooms.get('/tournaments');

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

这里是redux Reducer：

import _ from 'lodash';

import { FETCH_DATA, EDIT_DATA, DELETE_DATA } from '../actions/types';

export default (state = [], action) => {
  switch (action.type) {
    case FETCH_DATA:
      return { ...state, [action.payload.id]: action.payload };
    case EDIT_DATA:
      return { ...state, [action.payload.id]: action.payload };
    case DELETE_DATA:
      return _.omit(state, action.payload);
    default:
      return state;
  }
};

这是我要映射的 api（我已从 console.log(this.props.tournaments) 粘贴它

{undefined: Array(50)}
undefined: Array(50)
0: {id: "a31d5c46-9b7a-4833-bcf1-b0003365895e", name: "Quos Earum Occaecati", organizer: "Aut Omnis", game: "Dota 2", participants: {…}, …}
1: {id: "7b1470c4-86ca-40d3-822d-9753458abdfb", name: "Numquam Ut Vel Perspiciatis", organizer: "Nostrum", game: "Rocket League", participants: {…}, …}
2: {id: "6894a5ed-5334-4979-adfb-fe38871b6c74", name: "Provident Eos Id", organizer: "Odio", game: "Dota 2", participants: {…}, …}
3: {id: "986c9d83-9d76-403d-b1d2-5b47318a3914", name: "Consectetur Quod Sit", organizer: "Consequuntur Eius", game: "League of Legends", participants: {…}, …}
4: {id: "ce0f4112-8228-4a24-9997-5ebe253bc1a6", name: "Enim Eius", organizer: "Dolore Asperiores", game: "Rocket League", participants: {…}, …}
5: {id: "079882a8-35ce-4f01-b142-9ec79eae6b7e", name: "Expedita Nihil Aut", organizer: "Distinctio Quis", game: "Rocket League", participants: {…}, …}
6: {id: "f1f018be-a4c1-44fd-9cd3-97ed44073fbb", name: "Sed Velit Saepe Sunt", organizer: "Quaerat", game: "Rocket League", participants: {…}, …}
7: {id: "6eb102b9-4491-40ae-9480-26c93c0733e5", name: "Aperiam Sit", organizer: "Deleniti", game: "Battalion 1944", participants: {…}, …}
8: {id: "3c2e6b52-2441-4359-a049-3a00022b0337", name: "Rem Quos Ut", organizer: "Voluptates", game: "Dota 2", participants: {…}, …}
9: {id: "f319441a-b06a-44bc-8116-f7cb2e793067", name: "Dolores Reiciendis Qui", organizer: "Voluptate", game: "Dota 2", participants: {…}, …}
10: {id: "8e9943f9-bf7b-410a-8ea5-0e6ae7326ad5", name: "Veniam Delectus Iusto Ea", organizer: "Voluptatibus", game: "Rocket League", participants: {…}, …}
11: {id: "d1adac53-0c48-467a-a66c-39289781dc01", name: "Modi Maxime Reiciendis Similique", organizer: "Quas Aliquid", game: "Counter-Strike: Global Offensive", participants: {…}, …}
12: {id: "3fdd3bef-be4b-4abf-b973-5994895848ce", name: "Tenetur Dolores Sit Doloremque", organizer: "Non At", game: "League of Legends", participants: {…}, …}
13: {id: "65d66436-2cd8-463e-bd6e-3ab3572ff1ea", name: "Pariatur Laudantium Modi Id", organizer: "Expedita Soluta", game: "Dota 2", participants: {…}, …}
14: {id: "56cd5258-57bb-4092-9b50-e48c34fd790a", name: "Maxime Incidunt Molestiae", organizer: "Consequatur Rerum", game: "League of Legends", participants: {…}, …}
15: {id: "5e90ef1d-4f9e-4461-8fa9-eea51bf24437", name: "Ratione Dignissimos", organizer: "Tempore", game: "League of Legends", participants: {…}, …}
16: {id: "f2ffb866-f7e3-4ced-bac6-7dc758e7de60", name: "Vitae Deleniti", organizer: "Eveniet", game: "Rocket League", participants: {…}, …}
17: {id: "08f53ef5-1a74-40ae-a73e-94da5adb0198", name: "Aspernatur Sint", organizer: "Eveniet", game: "League of Legends", participants: {…}, …}
18:

我用来将数据映射到的 item.js 文件：

import React from 'react';
import '../styles/Item.css';

const Item = ({ id, organizer, game, participants, start }) => {
  return (
    <div className="column">
      <h2>Sed Natus Itaque</h2>
      <span> Id: {id}</span>
      <span>Organiser: {organizer} </span>
      <span>Game: {game}</span>
      <span>Participants: {participants}</span>
      <span>Start: {start}</span>
      <div className="buttonBar">
        <button className="button"> Edit</button>
        <button className="button"> Delete</button>
      </div>
    </div>
  );
};

export default Item;

Answer 1

我刚刚意识到我看错了有效载荷，我需要映射它两次以获得我想要的值：

  renderList() {
    let data = this.props.tournaments;
    const array = Object.keys(data).map(key => data[key]);
    return array.map(tournament => {
      return tournament.map(item => {
        return <Item organizer={item.organizer} />;
      });
    });
  }