Javascript React，在表单提交后使用redux编辑数据

我基本上是在尝试创建一个菜单计划器。现在我可以很好地添加数据，并将其打印到屏幕上。现在，当我尝试运行删除菜单项操作时。函数运行时，它“删除”屏幕上的数据，但会删除整个内容。我只希望它删除并替换选定的输入

我有一份主菜，一份，一份，另一份。如果我为那项特殊服务提供膳食。如果我想编辑，请选择侧边。我希望能够删除和替换我用editItem函数添加的内容，但仍然保留我没有更改的其余内容。我尝试过不同的选择。但到目前为止，我还不知道哪一个是理想的。如果我使用useState方式，它允许我更改它，但需要单击3次submit才能更新它

函数位于名为“editItems”的第二个代码段上，位于my reducer下

     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);

使用表单数据的每周组件//////////////// 从“React”导入React，{useState，useffect}； 从“时刻”中导入时刻； 从“/Weekly.module.css”导入类； 从“../../UI/Modal/Modal”导入模态； 从“../../ServiceForm/ServiceForm”导入ServiceForm； 从“../../Card/Card”导入卡片； 从“../../../store/actions/menuActions”导入{addMenu}”； 从“react redux”导入{connect}； 从“../../../axios.orders”导入axios； 从“../../UI/Button/Button”导入按钮； 从“重新选择”导入{createStructuredSelector}； 进口{ 选择服务， 选择服务ID， }来自“../../../store/selectors/createWeeks.selectors”； 从“/周值/周值”导入周值； const Weekly=（{weekData，service，orderData，…props}）=>{ const[modalShow，setModalShow]=useState（0）； const closeModalHandler=（）=>{ setModalShow（0）； }; 常量handleClick=（值）=>{ setModalShow（值）； }; //useffect（（）=>{ //axios //.post（“/feeds.json”，服务） //。然后（（res）=>{ //控制台日志（res）； // }) //.catch（（错误）=>{ //console.log（错误）； // }); //}，[服务]； const weekly=props.week.map（（天，i）=>{ const dayName=时刻（日）。格式（“ddd”）； const date=day.getDate（）； const dateId=时刻（天）。格式（“DD.MM”）； const currMonth=时刻（天）。格式（“MMM”）； const currWeek=时刻（天）.week（）； const servicefunch=service.map（（x，i）=>{ 返回x.id==dateId+“午餐”( )：null； }); const servicefinent=service.map（（x，i）=>{ 返回x.id==dateId+“晚餐”( )：null； }); 返回( { setModalShow（weekData.modalShow）； }} id={dateId+“午餐”} weekId={dateId+currWeek+“午餐”} dayName={dayName} mealType=“午餐” 日期={dayName} /> setModalShow（weekData.modalShow）} id={dateId+“晚餐”} weekId={currWeek} dayName={dayName} mealType=“晚餐” 日期={dayName} /> {dayName}{currMonth}{date}

handleClick（日期+午餐）} className={classes.sultcontainer} >

午餐

{服务午餐} handleClick（日期+晚餐）} className={classes.DinnerContainer} >

晚餐

{服务晚餐} ); }); 返回( &伊萨库； {每周} &rsaquo； ); }; const mapStateToProps=createStructuredSelector({ 工作日数据：选择服务， 服务：选择ServiceID， }); const mapDispatchToProps=（调度）=>({ 添加菜单：（项）=>调度（添加菜单（项））， }); 导出默认连接（mapStateToProps、mapDispatchToProps）（每周）；

---

此函数在代码中的何处？减速机选项卡下的editItems在代码中的何处？减速机选项卡下的editItems

 ////////////////////////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}>
            &lsaquo;
          </Button>
          <div className={classes.ContainerOne}>
            {weekly}
            <Button btnType="Next" clicked={props.next}>
              &rsaquo;
            </Button>
          </div>
        </div>
      );
    };
    
    const mapStateToProps = createStructuredSelector({
      weekData: selectService,
      service: selectServiceId,
    });
    
    const mapDispatchToProps = (dispatch) => ({
      addMenu: (item) => dispatch(addMenu(item)),
    });
    
    export default connect(mapStateToProps, mapDispatchToProps)(Weekly);