使用redux未定义道具

Question

我试图使用redux来更新脚本中的小时、分钟和秒，但我的道具没有定义。

我使用了一个foction-changeField，通过我的操作，由我的容器调度，并试图用我的reducer更新我的状态，但我的初始道具看起来没有定义。错误是下一个：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;

Answer 1

不要使用onChange={changeField}，而是尝试使用以下内容：

onChange={(e)=>changeField(e.target.name,e.target.value)}

我认为它在以您编写的方式调用onChange时没有传递正确的参数。

Answer 2

我可以看到两个主要问题
您的减速器状态为：

---

第一

const initialState = {
reanimation: {
category: '',
initialTime: '',
hours: '',
minutes: '',
seconds: '',
},
};

那么initialTime是修改时间的属性吗？

看看你的代码：

export const setTime = (initialTime) => ({
type: SET_TIME,
initialTime,
});

或

export const updateTime = (time) => ({
type: UPDATE_TIME,
initialTime: time,
});

---

秒

在EditForm:中

<input ... onChange={changeField} />

看看这个事件指向哪里：

export const changeField = (value, name) => ({
type: CHANGE_FIELD,
value,
name,
});

您将从输入字段收到onChange事件https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

这意味着你收到了一个event对象，而不是像你期望的那样的2个参数(名称和值(

您可以做的是：即

export const changeField = ({ target: { name, value } }) => ({
type: CHANGE_FIELD,
value,
name,
});

希望它能有所帮助！