После отправки .map не является функцией - reactjs - PullRequest
0 голосов
/ 18 июня 2020

Я надеялся, что смогу взглянуть на это, пожалуйста, я написал CRUD в реакции, и по какой-то причине каждый раз, когда я нажимаю «Отправить» после редактирования или создания чего-либо из моего api, я получаю сообщение об ошибке: .tournaments.map это не функция. Он успешно создает турнир, но я хочу, чтобы он правильно перенаправлялся без ошибок.

вот ошибка: Tournament.map не является функцией

вот код I Я использую: файл, который я использую для сопоставления моего api: List. js

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

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

  async handleDelete(id) {
    const url = `http://localhost:4000/tournaments/`;

    await axios
      .delete(url + id)
      .then(res => {
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      });
    window.location.reload(false);
  }

  renderList() {
    let data = this.props.tournaments;
    const array = Object.keys(data).map(key => data[key]);
    return array.map(tournament => {
      return tournament.map(item => {
        if (!this.props.tournaments) {
          return <div className="button">Loading....</div>;
        } else {
          return (
            <Item
              key={item.id}
              name={item.name}
              organizer={item.organizer}
              participants={Object.values(item.participants)}
              game={item.game}
              start={item.startDate}
            >
              <div className="buttonBar">
                <EditTournament id={item.id} name={item.name} />
                <button
                  className="button"
                  onClick={() => {
                    if (
                      window.confirm(
                        'Are you sure you want to delete this item?'
                      )
                    ) {
                      this.handleDelete(item.id);
                    }
                  }}
                >
                  Delete
                </button>
              </div>
            </Item>
          );
        }
      });
    });
  }

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

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

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

вот мой код для создания турнира: CreateTournament. js (этот компонент добавлен в index. js)

import { reduxForm, Field } from 'redux-form';
import '../styles/promptForms.css';
import '../styles/Header.css';
import { connect } from 'react-redux';
import { createTournaments } from '../actions/tournaments';

class CreateTournamentPromptFrom extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showHide: false
    };
  }
  createTournamentButton() {
    return (
      <div>
        <button
          className="genericButton"
          onClick={() => this.setState({ showHide: true })}
        >
          CREATE TOURNAMENT
        </button>
      </div>
    );
  }

  renderInput = ({ input, label }) => {
    return (
      <div>
        <label>{label}</label>
        <br />
        <input className="promptInput" {...input} autoComplete="off" />
      </div>
    );
  };

  onSubmit = formValues => {
    this.props.createTournaments(formValues);
  };

  render() {
    const { showHide } = this.state;

    return (
      <React.Fragment>
        <div className={`overlay ${showHide ? 'toggle' : ''} `} />

        <div className={`promptBox ${showHide ? 'toggle' : ''} `}>
          <h3>localhost:3000 says</h3>
          <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
            <Field
              name="name"
              component={this.renderInput}
              label="Enter Tournament:"
            />

            <button className="okayButton">OK</button>
          </form>
          <button
            className="cancelButton"
            onClick={() => this.setState({ showHide: false })}
          >
            Cancel
          </button>
        </div>
        {this.createTournamentButton()}
      </React.Fragment>
    );
  }
}

const formWrapped = reduxForm({
  form: 'promptForm'
})(CreateTournamentPromptFrom);

export default connect(null, { createTournaments })(formWrapped);

Вот действия, которые обрабатывают создание турнира: турниры. js

import {
  FETCH_TOURNAMENTS,
  FETCH_TOURNAMENT,
  CREATE_TOURNAMENT,
  EDIT_TOURNAMENT
} from './types';

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

export const fetchTournaments = () => async dispatch => {
  const response = await axios.get(API_TOURNAMENTS_URL);

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

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

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

export const createTournaments = formValues => async dispatch => {
  const response = await axios.post(API_TOURNAMENTS_URL, {
    ...formValues
  });

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

};

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

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

};

Вот фрагмент api:

[
  {
    "id": "9c430783-dc3a-4114-954a-c041e9350c81",
    "name": "Fuga Repellendus Quibusdam Neque",
    "organizer": "Perferendis Omnis",
    "game": "Counter-Strike: Global Offensive",
    "participants": {
      "current": 190,
      "max": 256
    },
    "startDate": "2020-06-12T18:58:14.837Z"
  },
{
    "id": "9c430783-dc3a-4114-954a-c041e9350c81",
    "name": "Fuga Repellendus Quibusdam Neque",
    "organizer": "Perferendis Omnis",
    "game": "Counter-Strike: Global Offensive",
    "participants": {
      "current": 190,
      "max": 256
    },
    "startDate": "2020-06-12T18:58:14.837Z"
  }
]
...