我实质上是在尝试创建菜单计划器。现在，我可以很好地添加数据并将其打印到屏幕上。现在，当我尝试运行REMOVE_MENU_ITEM操作时。该函数运行，它“删除”屏幕数据，但将整个内容取出。我只希望它删除并替换所选的输入。
我有entre，sideOne，sideTwo，其他。如果我为该特定服务提供膳食。万一我想编辑，sideOne。我希望能够删除并替换为用editItem函数添加的内容，但仍然保留其余未更改的内容。我尝试了不同的选择。但是到目前为止，我还不能确定哪个是理想的。如果我使用useState的方式，它可以让我对其进行更改，但是需要3次提交点击才能对其进行更新。
函数位于我的化简器下的第二个代码段“ editItems”上。
import React, {useState} from 'react';
import {connect } from 'react-redux';
import Card from '../Card/Card';
import classes from './ServiceForm.module.css';
import Button from '../UI/Button/Button';
import Input from '../UI/Input/Input'
import { addMenu, editItem} from '../../store/actions/menuActions';
import { createStructuredSelector } from "reselect";
import {selectService} from '../../store/selectors/createWeeks.selectors'
const ServiceForm = ({addMenu, weekData, editItem, ...props}) => {
const [isEditing, setIsEditing] = useState(false)
const [state, setState] = useState({
orderForm: {
entre: {
elementType: 'input',
elementConfig: {
type: 'text',
placeholder: 'Entre'
},
value: ''
},
sideOne: {
elementType: 'input',
elementConfig: {
type: 'text',
placeholder: 'Side One'
},
value: ''
},
sideTwo: {
elementType: 'input',
elementConfig: {
type: 'text',
placeholder: 'Side Two'
},
value: ''
},
other: {
elementType: 'input',
elementConfig: {
type: 'text',
placeholder: 'Other'
},
value: ''
}
}
})
const {service} = weekData;
const inputChangedHander = (event, inputIdentifier) => {
const updatedOrderForm = {
...state.orderForm
}
const updatedFormElement = {
...updatedOrderForm[inputIdentifier]
}
updatedFormElement.value = event.target.value;
updatedOrderForm[inputIdentifier] = updatedFormElement;
setState({orderForm: updatedOrderForm})
}
const submitHandler = (e) => {
e.preventDefault();
const formDatas = {};
for (let formElementIdentifier in state.orderForm) {
formDatas[formElementIdentifier] = state.orderForm[formElementIdentifier].value
}
const formData ={
id:props.id,
week_Id:props.weekId,
orderData:formDatas
}
// setFormData(prev =>{
// return{
// id:props.id,
// week_Id:props.weekId,
// orderData:formDatas
// }})
props.onAdd(props.modalShow);
addMenu({...formData, formData})
setIsEditing(true)
}
const handleEditing = (e)=>{
e.preventDefault()
const formDatas = {};
for (let formElementIdentifier in state.orderForm) {
formDatas[formElementIdentifier] = state.orderForm[formElementIdentifier].value
}
const formData ={
id:props.id,
week_Id:props.weekId,
orderData:formDatas
}
console.log(editItem(weekData))
props.onAdd(props.modalShow);
}
let formElementsArray = [];
for (let key in state.orderForm) {
formElementsArray.push({id: key, config: state.orderForm[key]})
}
let input = formElementsArray.map(formElement => (<Input key={formElement.id} elementType={formElement.config.elementType} elementConfig={formElement.config.elementConfig} value={formElement.config.value} changed={(event) => inputChangedHander(event, formElement.id)}/>))
return (<Card >
<div id={props.id}className={classes.Container}>
<div className={classes.Day}>
<p>{props.dates}</p>
</div>
<p className={classes.Title}>What's for Lunch Today Chef</p>
<div className={classes.Form}>
<form onSubmit={isEditing ? handleEditing : submitHandler}>
{input}
<Button type='submit'>Submit</Button>
</form>
</div>
</div>
</Card>)
}
const mapStateToProps = createStructuredSelector({
weekData: selectService
});
const mapDispatchToProps = dispatch =>({
addMenu: (order) => dispatch(addMenu(order)),
editItem: (item) =>dispatch(editItem(item))
})
export default connect(mapStateToProps, mapDispatchToProps)(ServiceForm);
我的减速器
////////////////////////Reducer////////////////////////
import * as actionTypes from "../actions/actionTypes";
import { updateObject } from "../utils/mealService.utility";
const initialState = {
service: [],
modalShow: null,
};
const submitFormSuccess = (state, action) => {
// const newOrder = updateObject( action.orderData, { id: action.newOrder } );
const updateService = updateObject(action.service);
return updateObject(state, {
modalShow: 0,
service: state.service.concat(updateService),
});
};
const editItems = (state, action) =>{
const updatedService = {...state}
const updatedServices = updateObject(state, updatedService)
//service: state.service.filter(service => service.id !== action.service.id)
console.log(updatedService)
console.log(updatedServices)
const updatedState = {
service:[updatedServices]
};
const checkedState = updatedServices.service.filter(x =>{
return x.id !== action.service.id
})
console.log(checkedState)
return updatedStateervice: state.service.filter(service => service.id !== action.service.id)
};
const menuReducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.ADD_MENU: return submitFormSuccess(state, action);
case actionTypes.REMOVE_MENU_ITEM: return editItems(state, action);
default: return state;
}
};
export default menuReducer;
////////////Weekly component that uses the form data////////////////
import React, { useState, useEffect } from "react";
import moment from "moment";
import classes from "./Weekly.module.css";
import Modal from "../../UI/Modal/Modal";
import ServiceForm from "../../ServiceForm/ServiceForm";
import Card from "../../Card/Card";
import { addMenu } from "../../../store/actions/menuActions";
import { connect } from "react-redux";
import axios from "../../../axios.orders";
import Button from "../../UI/Button/Button";
import { createStructuredSelector } from "reselect";
import {
selectService,
selectServiceId,
} from "../../../store/selectors/createWeeks.selectors";
import WeeklyValue from "./weekly-value/weekly-value";
const Weekly = ({ weekData, service, orderData, ...props }) => {
const [modalShow, setModalShow] = useState(0);
const closeModalHandler = () => {
setModalShow(0);
};
const handleClick = (value) => {
setModalShow(value);
};
// useEffect(() => {
// axios
// .post("/meals.json", service)
// .then((res) => {
// console.log(res);
// })
// .catch((error) => {
// console.log(error);
// });
// }, [service]);
const weekly = props.week.map((day, i) => {
const dayName = moment(day).format("ddd");
const date = day.getDate();
const dateId = moment(day).format("DD.MM");
const currMonth = moment(day).format("MMM");
const currWeek = moment(day).week();
const serviceLunch = service.map((x, i) => {
return x.id === dateId + " lunch" ? (
<WeeklyValue
key={i}
entre={x.orderData.entre}
sideone={x.orderData.sideOne}
sidetwo={x.orderData.sideTwo}
other={x.orderData.other}
/>
) : null;
});
const serviceDinner = service.map((x, i) => {
return x.id === dateId + " dinner" ? (
<WeeklyValue
key={i}
entre={x.orderData.entre}
sideone={x.orderData.sideOne}
sidetwo={x.orderData.sideTwo}
other={x.orderData.other}
/>
) : null;
});
return (
<Card key={"day" + i}>
<Modal
show={modalShow === date + " lunch"}
modalClosed={closeModalHandler}
>
<ServiceForm
key={dateId + " lunch"}
onAdd={() => {
setModalShow(weekData.modalShow);
}}
id={dateId + " lunch"}
weekId={dateId + currWeek + " lunch"}
dayName={dayName}
mealType="lunch"
dates={dayName}
/>
</Modal>
<Modal
show={modalShow === date + " dinner"}
modalClosed={closeModalHandler}
>
<ServiceForm
key={day}
onAdd={() => setModalShow(weekData.modalShow)}
id={dateId + " dinner"}
weekId={currWeek}
dayName={dayName}
mealType="dinner"
dates={dayName}
/>
</Modal>
<div className={classes.InputBox}>
<div>
<div className={classes.DaysContainer}>
<p>
{dayName} {currMonth} {date}
</p>
</div>
<div
onClick={() => handleClick(date + " lunch")}
className={classes.LunchContainer}
>
<p style={{ margin: "5px" }} className={classes.ServiceTitles}>
Lunch
</p>
<div className={classes.Meals}>{serviceLunch}</div>
</div>
<div
onClick={() => handleClick(date + " dinner")}
className={classes.DinnerContainer}
>
<p style={{ margin: "5px" }} className={classes.ServiceTitles}>
Dinner
</p>
<div className={classes.Meals}>{serviceDinner}</div>
</div>
</div>
</div>
</Card>
);
});
return (
<div className={classes.MasterContainer}>
<Button btnType="PreviousButton" clicked={props.previous}>
‹
</Button>
<div className={classes.ContainerOne}>
{weekly}
<Button btnType="Next" clicked={props.next}>
›
</Button>
</div>
</div>
);
};
const mapStateToProps = createStructuredSelector({
weekData: selectService,
service: selectServiceId,
});
const mapDispatchToProps = (dispatch) => ({
addMenu: (item) => dispatch(addMenu(item)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Weekly);