Я надеялся, что смогу взглянуть на это, пожалуйста, я написал 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"
}
]