如何使用UseReducer hook将表单数据提交到数组中，我必须获取数据并显示它？

Question

如何使用useReducer钩子将表单数据提交到数组中？

我的主要目标是将表单数据提交到一个数组&再次，我需要使用相同的数组或不同的数组来获取我的所有数据(我现在已经提交了(

这是我的动作类型

export const ACTIONS ={
FETCH_COURSES:"fetch-courses",
ADD_COURSE:"add-course",
DELETE_COURSE:"delete-course"
}

在这里，我为这个表单创建了一个上下文

这里我得到了数据(这里是从.js文件导入的对象数组中的数据(现在我需要用表格中输入的详细信息更新数据(这是一个对象数组(

import { ACTIONS } from '../Reducer/ActionTypes'
import reducer from '../Reducer/ReducerHook'
import React, {  createContext, useEffect, useReducer } from 'react'
import axios from 'axios'
import data from '../jsonData'
export const initialState = {
courses:data,
singleCourse:{
name: "",
type: "",
image: "",
duration: "",
fee: "",
devoloped:""
}
}
export const courseObj = createContext()
const CourseContext = ({ children }) => {

const  reducer = (state = initialState,action)=>{
switch (action.type) {
case ACTIONS.ADD_COURSE:
return {
...state,
courses: [...state.courses,action.payload]
}
default: return state

}
}

const [courses, dispatch] = useReducer(reducer, initialState)

return (
<courseObj.Provider value={{courses,dispatch}} >
{children}
</courseObj.Provider>
)
}

export default CourseContext

这是我的表格

import React, { useContext, useReducer, useState } from 'react'
import { courseObj, initialState } from '../Context/CourseContext'
import { ACTIONS } from '../Reducer/ActionTypes'
import CoursesList from './CoursesList'
const Courses = () => {
const {dispatch} = useContext(courseObj)
const [showHideForm, setShowHideForm] = useState(false)
const [state, setdispatch] = useReducer((curValues,newValues)=>({...curValues,...newValues}), initialState)
const {singleCourse} = initialState
const handleChange = (e) =>{
const {name ,value} = e.target;
setdispatch({
singleCourse :{[name]:value}
})
} 

const toggleForm = (e) => {
e.preventDefault()
setShowHideForm(!showHideForm)
}
const handleSubmit = (e) =>{
e.preventDefault()
dispatch()
}
return (
<div>
<div className="text-center mt-4" >
<button onClick={toggleForm}
className={showHideForm ? ' btn btn-danger' : ' btn btn-success'} >
{showHideForm ? 'cancel the form' : 'add Course'}
</button>
</div>
{showHideForm &&   <div className="card mt-5 col-12 col-lg-4 login-card p-5  mt-2 mx-auto">
<form onSubmit={handleSubmit} >
<h1 className="text-center mb-5">Add Course</h1>
<div className="form-group">
<label >Course Name</label>
<input type="text" name="name"  value={singleCourse.name}  onChange={handleChange} className="form-control" placeholder="Enter " />
</div>
<div className="form-group">
<label >Course Type</label>
<input type="text" name="type" value={singleCourse.type}  onChange={handleChange} className="form-control" placeholder="Enter " />
</div>
<div className="form-group">
<label >Course Type</label>
<input type="text" name="image" value={singleCourse.image}  onChange={handleChange} className="form-control" placeholder="Enter image address" />
</div>
<div className="form-group">
<label >Duration</label>
<input type="text" name="duration" value={singleCourse.duration} onChange={handleChange}  className="form-control" placeholder="Password" />
</div>
<div className="form-group">
<label >Course Fee</label>
<input type="number" name="fee" value={singleCourse.fee} onChange={handleChange}  className="form-control" placeholder="Password" />
</div>
<div className="form-group">
<label >Devoloped by</label>
<input type="text" name="devoloped" value={singleCourse.devoloped} onChange={handleChange}  className="form-control" placeholder="Password" />
</div>
<button type="submit" className="btn btn-primary btn-block">submit</button>
</form>
<small className="mx-auto text-danger" ></small>
</div>}
<div>
<CoursesList/>
</div>
</div>
)
}
export default Courses

上面的代码不完整，我被卡住了
这是我的课程表它包含了许多我需要添加的字段，以便将数据提交到上下文api数组中上面的代码不完整，我被卡住了，请任何人帮我

表格应提交

Answer 1

您需要将表单字段data/state作为有效负载来调度操作。在组件中，表单数据似乎存储在state状态变量中。以state作为有效负载调度类型为ADD_COURSE的操作。

const handleSubmit = (e) =>{
e.preventDefault();
dispatch({
type: ACTIONS.ADD_COURSE,
payload: state,
});
}