Я пытаюсь использовать избыточность для обновления часов, минут и секунд в скрипте, но мои реквизиты не определены.
Я использую функцию changeField через свое действие, отправляемое моими контейнерами, и пытаюсь обновить свое состояние с помощью моего редуктора, но мой первоначальный реквизит выглядит неопределенным. Ошибка следующая: Warning: Failed prop type: The prop часы is marked as required in Старт , but its value is не определено .
Мой компонент:
import React, { useEffect, useState, useRef } from 'react';
// import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
// permet de faire fonctionner setInterval
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest function.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
// eslint-disable-next-line consistent-return
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
const id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
// début du component
const Start = ({
setTime,
hours,
minutes,
seconds,
changeField,
}) => {
const newTime = () => (
new Date().toLocaleTimeString()
);
const heure = newTime();
const [date, setDate] = useState(heure);
const handleSetTime = () => {
setTime(newTime());
};
useInterval(() => {
setDate(newTime());
}, 1000);
// Ajoute la zone permettant de set sa propre heure
const handleModifyTime = () => {
document.getElementById('addTime').focus();
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(hours);
};
return (
<div>
<div className="start">
<p> Heure du début de la réanimation </p>
<p>
{date}
</p>
</div>
<div id="button-list">
<button type="button" onClick={handleSetTime}>Commencer</button>
<button type="button" id="changeHours" onClick={handleModifyTime}>Modifier l'heure de début</button>
</div>
<div id="addTime">
<div>
<p>Veuillez indiquer l'heure de début</p>
<p>Format heure : minute : seconds</p>
<form>
<label htmlFor="hours">
heure :
<input type="number" placeholder="Heure" id="hours" name="hours" required size="2" lenght="2" value={hours} onChange={changeField} />
</label>
<label htmlFor="minutes">
minutes :
<input type="number" placeholder="Minutes" id="minutes" name="minutes" required size="2" lenght="2" value={minutes} onChange={changeField} />
</label>
<label htmlFor="minutes">
secondes :
<input type="number" placeholder="Secondes" id="secondes" name="seconds" required size="2" lenght="2" value={seconds} onChange={changeField} />
</label>
<input type="submit" value="submit" onClick={handleSubmit} />
</form>
</div>
</div>
</div>
);
};
Start.propTypes = {
setTime: PropTypes.func.isRequired,
hours: PropTypes.number.isRequired,
minutes: PropTypes.number.isRequired,
seconds: PropTypes.number.isRequired,
changeField: PropTypes.func.isRequired,
};
Мое действие. js
export const SET_CATEGORY = 'SET_CATEGORY';
export const UPDATE_CATEGORY = 'UPDATE_CATEGORY';
export const SET_TIME = 'SET_TIME';
export const UPDATE_TIME = 'UPDATE_TIME';
export const CHANGE_FIELD = 'CHANGE_FIELD';
export const setCategory = (category) => ({
type: SET_CATEGORY,
category,
});
export const updateCategory = (category) => ({
type: UPDATE_CATEGORY,
category,
});
export const setTime = (time) => ({
type: SET_TIME,
time,
});
export const updateTime = (time) => ({
type: UPDATE_TIME,
time,
});
export const changeField = (value, name) => ({
type: CHANGE_FIELD,
value,
name,
});
Мой контейнер:
import { connect } from 'react-redux';
import Start from '../components/reaComponents/Start';
import { setTime, changeField } from '../actions/reanimation';
const mapStateToProps = (state) => ({
category: state.reanimation.category,
initialTime: state.reanimation.initialTime,
hours: state.reanimation.hours,
minutes: state.reanimation.minutes,
seconds: state.reanimation.seconds,
});
const mapDispatchToProps = (dispatch) => ({
changeField: (value, name) => {
dispatch(changeField(value, name));
},
setTime: (initialTime) => {
dispatch(setTime(initialTime));
},
});
const StartContainer = connect(
mapStateToProps,
mapDispatchToProps,
)(Start);
export default StartContainer;
И, наконец, мой редуктор
import { SET_CATEGORY, SET_TIME, CHANGE_FIELD } from '../actions/reanimation';
const initialState = {
reanimation: {
category: '',
initialTime: '',
hours: '',
minutes: '',
seconds: '',
},
};
const reanimationReducer = (state = initialState, action = {}) => {
switch (action.type) {
case CHANGE_FIELD:
return {
...state,
reanimation: {
...state.reanimation,
[action.name]: action.value,
},
};
case SET_CATEGORY:
return {
...state,
reanimation: {
...state.reanimation,
category: action.category,
},
};
case SET_TIME:
return {
...state,
reanimation: {
...state.reanimation,
initialTime: action.initialTime,
},
};
default:
return state;
}
};
export default reanimationReducer;