当尝试访问变量以完成axios中的补丁请求时，我收到了200响应，但是发送的数据是get请求中的初始数据，而不是表单中的新数据。使用console.log查看变量是否更新时，新数据被设置为变量，但是axios仍然无法访问正确的数据。
为了得到这个，我用了这个代码：
import { withPageAuthRequired } from '@auth0/nextjs-auth0'
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Image from 'next/image'
import Head from 'next/head';
import axios from 'axios'
import styles from './Edit.module.css'
export default function AddMember () {
const [name, setName] = useState([])
const [occupation, setOccupation] = useState('')
const [paragraph, setParagraph] = useState('')
const [date, setDate] = useState('')
const router = useRouter()
const { id }= router.query
useEffect(() => {
const fetchAbout = () => {
axios
.get('http://localhost:5000/members/' + id)
.then((res) => {
setName(res.data.name)
setOccupation(res.data.occupation)
setParagraph(res.data.bio)
setDate(res.data.join)
})
.catch((err) =>{
console.log(err)
})
}
fetchAbout()
}, [id])
const handleName = ({target:{value}}) => setName(value)
const handleOccupation = ({target:{value}}) => setOccupation(value)
const handleParagraph = ({target:{value}}) => setParagraph(value)
const handleDate = ({target:{value}}) => setDate(value)
const cancelHandler = () => {
window.location = '/members'
}
const [image, setImage] = useState("")
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
setImage(URL.createObjectURL(event.target.files[0]));
}
}
const submitHandle = (e) => {
e.preventDefault();
axios
.patch('http://localhost:5000/members/' + id, {
name: name
})
.then((res) => {
console.log(res)
})
}
return(
<div className={styles.container}>
<Head>
<title>Member | Edit</title>
</Head>
<div className={styles.editMember}>
<form onSubmit={submitHandle} encType="multipart/form-data">
<div className={styles.title}>
<div className={styles.bar}/>
<div className={styles.image}><Image alt='' src={image} layout='fill'/></div>
<input type="file" onChange={onImageChange}></input>
</div>
<div className={styles.inputs}>
<div>
<input value={name} placeholder="Name" onChange={handleName} />
<input value={occupation} placeholder="Occupation" onChange={handleOccupation} />
<input value={date} placeholder="Member Since" onChange={handleDate} />
</div>
<textarea value={paragraph} placeholder="Paragraph" onChange={handleParagraph} />
</div>
<div className={styles.buttons}>
<button type="submit">Add</button>
<button onClick={cancelHandler}>Cancel</button>
</div>
</form>
</div>
</div>
)
}
export const getServerSideProps = withPageAuthRequired();
1条答案
按热度按时间23c0lvtd1#
你确信补丁程序服务在更新后返回新对象吗？
因为如果你正在使用mongodb
Model.findOneAndUpdate，这将返回更新前的旧模型.如果这是问题，你可以添加{new: true}到函数以返回更新的对象作为结果