使用MUI TextField输入时调用jsonplaceholder API更新数据失败如何解决

问题原因 #

你现在的代码有4个核心问题导致更新不生效：

• 表单提交没有阻止默认刷新行为，请求发出后页面直接刷新中断流程
• TextField用了defaultValue属于非受控组件，没有绑定onChange事件收集用户输入内容，修改的内容根本没存在本地状态里
• PUT请求里传的是写死的固定字符串，没有用到用户的输入内容
• 接口请求到的原始文章数据没有同步到表单绑定的状态里，初始值和后续输入完全脱节

修正后的代码 #

逻辑部分 #

const EditPost = ({ match }) => {  
    const [formData, setFormData] = useState({
        title: "",
        body: "",
    });
    const [error, setError] = useState("");
    const { id } = match.params;
    const [post, setPost] = useState(null);

    useEffect(() => {
        axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
        .then((response) => {
            setPost(response.data);
            // 把接口拿到的原始内容同步到表单状态，作为初始值
            setFormData({
                title: response.data.title,
                body: response.data.body
            })
        });
    }, [id]);

    // 新增表单内容变化的处理函数
    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }))
    }

    const updatePost = (e) => {
        // 阻止表单默认提交刷新页面的行为
        e.preventDefault();
        axios
        .put(`https://jsonplaceholder.typicode.com/posts/${id}`, {
            // 用表单状态里的用户输入内容，不要写死
            title: formData.title,
            body: formData.body
        })
        .then((response) => {
            setPost(response.data);
            alert("更新成功")
        })
        .catch(err => {
            setError("更新失败，请稍后重试")
        })
    }

表单部分 #

<form noValidate autoComplete="off" onSubmit={updatePost}>
    <TextField 
        id="outlined-basic" 
        label="Title" 
        // 用value绑定状态，不要用defaultValue
        value={formData.title || ""} 
        name="title"
        type="text" 
        // 绑定change事件
        onChange={handleChange} />
    <TextField 
        id="outlined-multiline-flexible" 
        label="Body" 
        value={formData.body || ""} 
        name="body"
        type="text" 
        onChange={handleChange}
        multiline
        minRows={3} />
    <Button 
        type="submit">
            Update Post
    </Button>
</form>

补充说明 #

jsonplaceholder的PUT接口是模拟更新，实际不会修改服务器上的原始数据，接口返回的200响应里的内容就是你提交的内容，只要能拿到正确的返回就算更新逻辑生效。

内容的提问来源于stack exchange，提问作者user13652548