我正在尝试通过对操作执行PUT请求来更新包含项目信息表单数据的MongoDB数据库，但无法在组件上获取handleSumbit函数来调用我的项目操作。我收到404错误。我不知道我缺少什么或做错了什么。任何见识将不胜感激。
我的组件：
import React,{ useState } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import '../styles/ViewProject.css'
import { updateProjects } from '../actions/project.actions'
const EditProject = ({ project,match }) => {
const [name,setName] = useState('')
const [email,setEmail] = useState('')
const [projectName,setProjectName] = useState('')
const [projectType,setProjectType] = useState('')
const [multiple,setMultiple] = useState(false)
const [dueDate,setDueDate] = useState(Date)
const [url,setUrl] = useState('')
const [description,setDescription] = useState('')
const handleSubmit = e => {
e.preventDefault()
updateProjects(name,email,projectName,projectType,dueDate,url,description)
console.log('Data ',name,projectName)
}
return(
<form classname="viewProjectContainer" onSubmit={handleSubmit}>
{project.map((task,i) => (
<div key={i++} >
{match.params.id === task._id ?
<div classname="vp">
<div classname="vpLeft">
<div classname="vpTitle">
<input classname='vpProjectName' defaultvalue={task.projectName} onChange={e => setProjectName(e.target.value)} />
</div>
<div classname="vpSub">
<p>Submitted by: </p>
<label>Name: </label>
<input classname='vpName' defaultvalue={task.name} onChange={e => setName(e.target.value)}/>
<label>Email: </label>
<input classname='vpEmail' defaultvalue={email} onChange={e => setEmail(e.target.value)}/>
</div>
<div classname="vpDescription">
<label>{task.multiple === true ? "(Multiple)" : "Single"}</label>
<p>Project Type: </p>
<select classname='formInput' onChange={e => setProjectType(e.target.value)} defaultvalue={projectType}>
<optgroup label='Digital'>
<option value='banner'>Banner</option>
<option value='emailBlast'>Email Blast</option>
<option value='productImage'>Product Image</option>
<option value='socialMediaAd'>Social Media Ad</option>
<option value='video'>Video</option>
<option value='websiteMockup'>Website Mockup</option>
<option value='other'>Other (Please be specific in Description)</option>
</optgroup>
<optgroup label='Physical Product'>
<option value='bottleOpener'>Bottle Opener</option>
<option value='clothing'>Clothing</option>
<option value='keyChain'>Key Chain</option>
<option value='popSocket'>Pop Socket</option>
<option value='usb'>USB</option>
<option value='other'>Other (Please be specific in Description)</option>
</optgroup>
<optgroup label='Print'>
<option value='businessCard'>Business Card</option>
<option value='brochureBiFold'>Brochure - Bi-fold</option>
<option value='brochureTriSquare'>Brochure - Trifold Square</option>
<option value='brochureTriStandard'>Brochure - Trifold Standard</option>
<option value='catalogMore'>Catalog - Less than 50 pages</option>
<option value='catalogLess'>Catalog - More than 50 pages</option>
<option value='documentFull'>Document - Full Sheet</option>
<option value='documentHalf'>Document - Half Sheet</option>
<option value='flyer4x6'>Flyer - 4x6</option>
<option value='flyer5x7'>Flyer - 5x7</option>
<option value='flyer6x9'>Flyer - 6x9</option>
<option value='postCard4x6'>Post Card 4x6</option>
<option value='postCard5x7'>Post Card 5x7</option>
<option value='postCard6x9'>Post Card 6x9</option>
<option value='poster11x17'>Poster 11x17</option>
<option value='poster24x36'>Poster 24x36</option>
<option value='other'>Other (Please be specific in Description)</option>
</optgroup>
<optgroup label='Other'>
<option value='consultation'>Consultation</option>
<option value='labeling'>Labeling</option>
<option value='other'>Other (Please be specific in Description)</option>
</optgroup>
</select>
<div classname="vpDescBox">
<textarea classname='updateDescription' defaultvalue={description} onChange={e => setDescription(e.target.value)}></textarea>
</div>
</div>
</div>
<div classname="vpRight">
<div classname="vpTicket">
<p>Ticket Number: {task.ticketNumber}</p>
<label>Submitted: {task.date} </label>
<label>Preferred due date: </label>
<input type='date' defaultvalue={task.dueDate} onChange={e => setDueDate(e.target.value)}/>
</div>
<div>
<label>Reference links: </label>
<input type='text' defaultvalue={task.url} onChange={e => setUrl(e.target.value)}/>
<label></label>
</div>
<div>
<p>Project Status:</p>
<p>Task Recieved: {task.recieved === true ? "Recieved" : "Not Revieved"}</p>
<p>Task in progress: {task.inProgress === true ? "In Progress" : "Not in Progress"}</p>
<p>Completed: {task.completed === true ? "Complete" : "Incomplete"}</p>
</div>
</div>
</div>: null}
</div>
))}
<div classname='buttonsContainer'>
<button type='submit' classname='projectViewButton1'><Link to={'/' + match.params.id}>Save</Link></button>
</div>
</form>
)
}
const mapstatetoProps = state => ({
project: state.projects.project,id: state.projects.id
})
export default connect(
mapstatetoProps,{ updateProjects }
)(EditProject)
我的动作
export function updateProjects(name,description) {
console.log('reducer ',name)
axios.put('api/projects/update/:id',{
name: name,email: email,projectName: projectName,projectType: projectType,// multiple: multiple,dueDate: dueDate,url: url,description: description
}).then(resp => {
console.log("Data updated: ",resp.data)
})
}
我的后端：
// @route PUT api/projects/update/:id
// @desc Update projects
// @access Private
router.put('/update/:id',async (req,res) => {
try {
const {
name,multiple,reference,attachment,description,ticketNumber,received,inProgress,completed
} = req.body
const project = await Project.findByIdAndUpdate(req.params.id,{
name,completed
})
res.json(project);
} catch (err) {
console.error(err.message)
res.status(500).send('Server Error')
}
})
感谢您的帮助！