POST 400：错误请求 - 使用 Django REST API 和 React

Question

我对网络开发还很陌生，所以请提前原谅我的无知。

我正在使用 React 尝试使用以下方法将数据发布到由 Django 管理的服务器端点：

sendData(data) {
  const url = "http://127.0.0.1:8080/api/filtros/1/";
  const requestOptions = {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  };
  fetch(url, requestOptions);
}

在 NavDropdown React 组件的 onClick 上：

<NavDropdown.Item
  key={item.id}
  onClick={() =>
    this.sendData({
      id: 0,
      dimension_id: dimension.id,
      item_id: item.id,
      usuario_id: 1
    })
  }
>
  {item.descripcion}
</NavDropdown.Item>

这是我使用 Django 在路由器上注册 url 的方式：

router.register('api/filtros/1', FiltroUsuariosViewSet, 'filtro')

我的 Django ModelViewSet 看起来像这样：

class FiltroUsuariosViewSet(viewsets.ModelViewSet):

    queryset = FiltroUsuarios.objects.all()
    permission_classes = [
        permissions.AllowAny
    ]
    serializer_class = FiltroUsuariosSerializers

我的 Django Serializer 看起来像这样：

class FiltroUsuariosSerializers (serializers.ModelSerializer):
    class Meta:
        model = FiltroUsuarios
        fields = ('id', 'dimension_id', 'item_id', 'usuario_id')

    def create(self, validated_data):
        post = FiltroUsuarios.objects.create(**validated_data)

当我点击组件时，我得到这个： POST http://127.0.0.1:8080/api/filtros/1/ 400 (Bad Request)显然错误出在获取请求上。

你们有什么想法吗？

非常感谢！

Answer 1

在连接 Django 和 React 时，理解和消除 400 Bad Request 错误的最好方法是在开发模式下运行 Django，然后在发送请求时启动浏览器的网络选项卡。

切换到Network -> Response选项卡并调用sendData() 。 由于您在 Django 的开发服务器上运行，您将收到 400 Bad Request 错误的特定异常。 要模拟这一点，请参阅下面的屏幕截图并注意：

{"user": ["类型不正确。预期的 pk 值，收到的字符串。"]}

回到你的问题，你的.sendData()有以下内容：

x = {
      id: 0,
      dimension_id: dimension.id,
      item_id: item.id,
      usuario_id: 1
    }

然后调用JSON.stringify() 。 如果dimension.id和item_id都是整数（合理的假设），那么您将以下内容作为有效负载传递：

JSON.stringify(x)
# returns:
"{"id":0,"dimension_id":1,"item_id":2,"usuario_id":3}"

您的FiltroUsuarios Django 模型定义了这些列/字段，因此您现在需要检查您的模型和FiltroUsuariosSerializers ，这些是映射到这些列的预期值/值类型。