如何用Axios实现MovieDB API的电影评分POST请求？

你的代码存在3个核心问题导致评分提交失败，以下是修正后的完整实现及问题说明：

问题拆解 #

• 请求体格式错误：TMDB评分API要求请求体是包含value字段的JSON对象，而非直接传递评分数值
• 缺失必要请求头：必须设置Content-Type: application/json，否则API无法正确解析请求内容
• 状态与输入类型不匹配：初始状态用空字符串会导致类型混乱，同时输入框未限制TMDB要求的评分范围（0.5-10，步长0.5）

修正后的代码 #

import React, { useState } from 'react'
import axios from 'axios';
import { API_KEY } from '../api';
import { useParams } from 'react-router-dom';

const RateMovie = () => {
    const { id } = useParams()
    // 初始状态设为null，保持数字类型一致性
    const [rate, setRated] = useState(null)

    const rateMovie = async (e) => {
        e.preventDefault();
        // 前置校验评分合法性
        if (!rate || rate < 0.5 || rate > 10) {
            console.error("评分必须在0.5-10之间");
            return;
        }
        try {
            const response = await axios.post(
                `https://api.themoviedb.org/3/movie/${id}/rating?api_key=${API_KEY}`,
                { value: rate }, // 符合API要求的请求体格式
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }
            );
            console.log("评分提交成功:", response.data);
            setRated(null)
        } catch (error) {
            // 优先获取TMDB返回的具体错误信息
            console.error("评分提交失败:", error.response?.data || error.message);
        }
    };

    const handleChange = (e) => {
        // 将输入值转为数字类型
        setRated(parseFloat(e.target.value));
    };

    return (
        <form onSubmit={rateMovie}>
            {/* 限制输入范围、步长，优化用户输入体验 */}
            <input
                type="number"
                min="0.5"
                max="10"
                step="0.5"
                onChange={handleChange}
                value={rate || ''}
                placeholder="输入0.5-10之间的评分"
            />
            {/* 禁用无效状态下的提交按钮 */}
            <button type='submit' disabled={!rate || rate <0.5 || rate>10}>提交评分</button>
        </form>
    )
}

export default RateMovie

额外注意事项 #

• TMDB评分接口需要用户身份凭证：除API Key外，还需携带guest_session_id或session_id参数（需先调用创建会话的接口获取）
• 若仍报错，可检查网络请求中的参数是否完整，以及会话凭证是否有效

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