我的模态在使用Redux的React中没有正确切换?Redux，功能组件

Question

当试图在我的应用程序上添加切换模式时，状态被搞砸了，它自动显示模式形式，而没有点击任何东西来切换它。模式的"initialState"被设置为"false"，但在主组件"timeSlotSheet"中，它显示在我使用功能组件使功能正常工作时遇到问题的timeSlots下面。另一个可能导致该问题的潜在问题是，我注意到函数没有从timeSlotSheet组件传递到模态。

actions.js

import {
ADD_USER_INFO,
CHOOSE_TIME_SLOT,
UPDATE_USER_INFO,
TOGGLE_MODAL,
} from './actionTypes'

export const chooseTimeSlot = (userInput) => ({
type: CHOOSE_TIME_SLOT , payload: {
time: userInput.time,
name: userInput.name,
phone: userInput.phone,
filled: userInput.filled,
}
});
export const updateTimeSlot = (userData) => ({
type: ADD_USER_INFO, payload: {
userData
},
userData
});
export const editForm = (userInput) => ({
type: UPDATE_USER_INFO, payload: {
time: userInput.time,
name: userInput.name,
phone: userInput.phone,
filled: userInput.filled,
}

});
export const toggleModal = () => ({
type: TOGGLE_MODAL
})

reducers.js

import {
ADD_USER_INFO,
CHOOSE_TIME_SLOT,
UPDATE_USER_INFO,
TOGGLE_MODAL 
} from '../actions/actionTypes'
//the reducer will keep track of all the actions brought in from actionTypes as well as use initial state 
//create the time slots that the users will be selecting.
export default function appReducer(state = initialState, action){
switch(action.type) {
case TOGGLE_MODAL:
return {...state, open: !state.open}
case CHOOSE_TIME_SLOT:
return {...state, chosenTimeSlot: action.payload}
case UPDATE_USER_INFO:
return {...state, chosenTimeSlot: action.payload}
case ADD_USER_INFO:
return {...state, userData: action.payload.userData}
default:
return state
}
}

const initialState = {
userData: [
{
time: "9:00am-10:00am",
name: 'Cameron Lumpkin',
phone: '000000000',
filled: true
},
{
time: "10:00am-11:00am",
name: '',
phone: '',
filled: false
},
{
time: "11:00am-12:00pm",
name: '',
phone: '',
filled: false
},
{
time: "12:00pm-1:00pm",
name: '',
phone: '',
filled: false
},
{
time: "1:00pm-2:00pm",
name: '',
phone: '',
filled: false
},
{
time: "2:00pm-3:00pm",
name: '',
phone: '',
filled: false
},
{
time: "3:00pm-4:00pm",
name: '',
phone: '',
filled: false
},

{
time: "4:00pm-5:00pm",
name: '',
phone: '',
filled: false
},
],
open: false,
chosenTimeSlot: {
time: '',
name: '',
phone: '',
filled: false
}
}

timeSlotSheet.js

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { toggleModal, updateTimeSlot,  chooseTimeSlot, editForm } from '../actions/actions';
import {bindActionCreators} from 'redux';
import  TimeSlot from './TimeSlot'
import {useDispatch, useSelector} from 'react-redux'
import Modal from './Modal'
const TimeSlotSheet = () => {
const userData = useSelector(state => state.userData);
const open = useSelector(state => state.open);
const chosenTimeSlot = useSelector(state => state.chosenTimeSlot)
const dispatch = useDispatch();

const openModal = (userInput) => {
dispatch(toggleModal());
dispatch(chooseTimeSlot(userInput));

}
const closeModal = () => {
toggleModal();
}
const handleChange = (event) => {
let newChosenTimeSlot = {
...userData, [event.target.id]: event.target.value
};
editForm(newChosenTimeSlot)
}
const handleOnSubmit = () => {
let filledSlot;
if( chosenTimeSlot.name !== '' || chosenTimeSlot.phone !== '' ) {
filledSlot = {
...chosenTimeSlot, filled: true
};
} else {
filledSlot = {
...chosenTimeSlot, filled: false
};
}
let updatedTimeSlot = userData.map(timeSlot => {
if (timeSlot.time === chosenTimeSlot.time) {
return filledSlot
} else {
return timeSlot;
}
})
updateTimeSlot(updatedTimeSlot);
toggleModal();

}
return (
<div>
<h2>Pick a time.</h2>
{userData.map(userInput=> {
return (
<ul onClick={()=>openModal(userInput)} key={userInput.time}>
<TimeSlot time={userInput.time}  name={userInput.name} phone={userInput.phone} filled={userInput.filled}/>
</ul>


)
})}
<Modal open={open} handleChange={handleChange} chosenTimeSlot={chosenTimeSlot} closemodal={closeModal} handleOnSubmit={handleOnSubmit} />
</div>
)
}

export default TimeSlotSheet;

Modal.js

import React from 'react'
import {dispatch} from 'react-redux'
const Modal = ({chosenTimeSlot, closeModal, handleChange, open, handleOnSubmit }) => {
// render() {
let time = chosenTimeSlot.time ? chosenTimeSlot.time : '';
let name = chosenTimeSlot.name ? chosenTimeSlot.name : '';
let phone = chosenTimeSlot.phone ? chosenTimeSlot.phone : '';
let isEmpty = (name !== '' && phone !== '') || (name === '' && phone === '');
return (
<div>
<div className="modal-container" open={open} closeModal={closeModal}>

<div>
<input type="text"
id="name"
label="name"
value={name}
onChange={handleChange}
/>
<input type="tel" id="phone" label="phone number" value={phone} onChange={handleChange} />
<button onClick={handleOnSubmit}> confirm</button>
<button onClick={closeModal} disabled={!isEmpty}>cancel</button>
</div>


</div>
</div>
)
}

export default Modal

Answer 1

要使某个操作发生，您需要调度该特定的操作处理程序。但是在closeModal((函数中的timeSlotSheet.js中，您并没有像在openModal(。

希望这个答案能有所帮助。