如何修复此审核表单组件错误请求错误

Question

我有一个表单组件，应该在 Strapi 的评论内容类型中创建条目。我相信数据足够了，但我仍然收到 400 bad request 错误。这是我的组件：

import  { useState } from 'react'
import axios from 'axios'
import { FaStar } from 'react-icons/fa'
import style from "./Form.module.css"
import { userData } from "../../Helpers"
import { toast } from 'react-toastify'

const ReviewForm = ({tourTitle}) => {
  const [rating, setRating] = useState('')
  const [body, setBody] = useState('')
  const { accessToken, username } = userData()
  

  const handleSubmit = async (e) => {
    e.preventDefault()

    const data = {
      tour: tourTitle,
      rating,
      body,
      author: username
    };

    try {
      const response = await axios.post('http://localhost:1337/api/reviews',
       data,
       {
        headers: {
          Authorization: `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
        },
      })

      console.log(data)
      toast('Review created successfully!')
      setRating('')
      setBody('')

    } catch (error) {
      console.log(data)
      console.error('Error creating review:', error)
      toast('Error creating review. Please try again.')

    }

  };

  const handleStarClick = (starRating) => {
    setRating(starRating);
  };

  const renderStars = () => {
    const stars = [];
    for (let i = 1; i <= 5; i++) {
      const starClassName = i <= rating ? style.selected : style.star;
      stars.push(
        <FaStar
          key={i}
          className={starClassName}
          onClick={() => handleStarClick(i)}
        />
      );
    }
    return stars;
  };

  return (
    <form onSubmit={handleSubmit} className={style.writeReview}>
      <h2>Write a review:</h2>
      <div className={style.rating}>{renderStars()}</div>

      <div className={style.fieldConatiner}>
            <textarea
                id="body"
                name="body"
                rows="4"
                cols="50"
                value={body}
                onChange={(e) => setBody(e.target.value)}
                required
            />
      </div>  
      
      <button type="submit" className={style.submitBtn}>Submit Review</button>
    </form>
  );
};

export default ReviewForm;

以及我的内容类型的屏幕截图：

控制台的屏幕截图，显示错误消息和我尝试发布到我的内容类型的数据

任何帮助将非常感激，我失去了它

我尝试过以不同的组合使用用户 ID、用户名、旅游 ID 和旅游标题，但都不起作用。

Answer 1

尝试将

data

更改为

{ data }

中的

const response = await ...

，strapi期望在

data

中拥有密钥

body

，当你像你这样做时，主体将等于数据，这是不正确的

 const response = await axios.post('http://localhost:1337/api/reviews',
       { data }, // << right here
       {
        headers: {
          Authorization: `Bearer ${accessToken}`,
          'Content-Type': 'application/json',
        },
      })