если кто-то достаточно любезен, чтобы попытаться немного помочь мне здесь. Я возвращался к этой проблеме, я понятия не имею, что ее вызвало. Я получаю сообщение об ошибке: err response TypeError: state.drivers не повторяемый driverActions. js: 49 Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'statusText' из неопределенного в driverActions. js: 49
Но я уверен, что синтаксически я правильно в действии создатель, редуктор и компонент. У меня есть тот же лог c, чтобы добавить техник и добавить драйвер. Техник один работает, водитель - нет. Есть идеи?
Создатель действий
import {
GET_DRIVERS,
ADD_DRIVER,
DELETE_DRIVER,
SET_LOADING,
DRIVERS_ERROR
} from "./types";
export const addDriver = driver => async dispatch => {
try {
setLoading();
const res = await fetch("/drivers", {
method: "POST",
body: JSON.stringify(driver),
headers: {
"Content-Type": "application/json"
}
});
const data = await res.json();
dispatch({
type: ADD_DRIVER,
payload: data
});
} catch (err) {
console.log("err response", err);
dispatch({
type: DRIVERS_ERROR,
payload: err.response.statusText
});
}
};
Редуктор:
import {
GET_DRIVERS,
ADD_DRIVER,
DELETE_DRIVER,
SET_LOADING,
DRIVERS_ERROR
} from "../actions/types";
const initialState = {
drivers: null,
error: null,
loading: false
};
export default (state = initialState, action) => {
switch (action.type) {
case GET_DRIVERS:
return {
...state,
drivers: action.payload,
loading: false
};
case ADD_DRIVER:
return {
...state,
drivers: [...state.drivers, action.payload],
loading: false
};
default:
return state;
Компонент:
import React, { useState } from "react";
import { connect } from "react-redux";
import { addDriver } from "../../store/actions/driverActions";
import PropTypes from "prop-types";
import M from "materialize-css/dist/js/materialize.min.js";
const AddDriverModal = ( { addDriver }) => {
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [address, setAddress] = useState("");
const [email, setEmail] = useState("");
const [phoneNumber, setPhoneNumber] = useState("");
const [birthYear, setBirthYear] = useState("");
const [hourlyRate, setHourlyRate] = useState("");
const [license, setLicense] = useState("");
const [available, setAvailable] = useState(true);
const [completedRoutes, setCompletedRoutes] = useState(null);
const [incompleteRoutes, setIncompleteRoutes] = useState(null);
const onSubmit = () => {
if (firstName === "" || lastName === "") {
M.toast({ html: "Please enter the first and last name" });
} else {
addDriver({
firstName,
lastName,
address,
email,
phoneNumber,
birthYear,
hourlyRate,
license,
available,
completedRoutes,
incompleteRoutes
});
M.toast({ html: `${firstName} ${lastName} was added as a driver` });
// Clear Fields
setFirstName("");
setLastName("");
setAddress("");
setPhoneNumber("");
setBirthYear("");
setHourlyRate("");
setLicense("");
setAvailable(true);
setCompletedRoutes(null);
setIncompleteRoutes(null);
}
};
return (
<div id="add-driver-modal" className="modal">
<div className="modal-content">
<div className="row">
<div className="col s12">
<h4>Add driver</h4>
<br />
<div className="col s6">
<div className="input-field">
<input
type="text"
name="firstName"
value={firstName}
onChange={e => setFirstName(e.target.value)}
/>
<label htmlFor="firstName" className="active">
First Name
</label>
</div>
</div>
<div className="col s6">
<div className="input-field">
<input
type="text"
name="lastName"
value={lastName}
onChange={e => setLastName(e.target.value)}
/>
<label htmlFor="lastName" className="active">
Last Name
</label>
</div>
</div>
<div className="col s6">
<div className="input-field">
<input
type="email"
name="email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<label htmlFor="email" className="active">
Email
</label>
</div>
</div>
<div className="col s6">
<div className="input-field">
<input
type="text"
name="address"
value={address}
onChange={e => setAddress(e.target.value)}
/>
<label htmlFor="address" className="active">
Address
</label>
</div>
</div>
<div className="col s6">
<div className="input-field">
<input
type="text"
name="phoneNumber"
value={phoneNumber}
onChange={e => setPhoneNumber(e.target.value)}
/>
<label htmlFor="phoneNumber" className="active">
Phone Number
</label>
</div>
</div>
<div className="col s6">
<div className="input-field">
<input
type="text"
name="birthYear"
value={birthYear}
onChange={e => setBirthYear(e.target.value)}
/>
<label htmlFor="birthYear" className="active">
Birth Year
</label>
</div>
</div>
<div className="col s6">
<div className="input-field">
<input
type="number"
name="hourlyRate"
value={hourlyRate}
onChange={e => setHourlyRate(e.target.value)}
/>
<label htmlFor="hourlyRate" className="active">
Hourly Rate
</label>
</div>
</div>
<div className="col s6">
<div className="input-field">
<input
type="text"
name="license"
value={license}
onChange={e => setLicense(e.target.value)}
/>
<label htmlFor="license" className="active">
License
</label>
</div>
</div>
<div className="col s12">
<div className="modal-footer">
<a href="#!">
<button
className="btn waves-effect blue waves-light"
type="submit"
name="action"
onClick={onSubmit}
>
Submit
<i className="material-icons right">send</i>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
AddDriverModal.propTypes = {
addDriver: PropTypes.func.isRequired
};
export default connect(null, { addDriver} )(AddDriverModal);