ReactJS 表单提交 this.props.history.push('/downloads') 未链接到新页面

Question

我正在尝试在用户使用下面函数中的 this.props.history.push 填写表单后推送到新页面。

  handleSubmit = async event => {
    event.preventDefault()
    try {
      const res = await newEnquiry(this.state.formData)
      this.props.history.push('/downloads')
      console.log(res)
    } catch (err) {
      console.log(err.response.data)
    }
  }

ReactJS 表单在 /contacts 页面上运行良好，并将信息提交到我的 Django 后端，所以我知道它运行正常，但是我无法使重定向正常工作，它给了我这条错误消息。

<form onSubmit={this.handleSubmit}> 在我的表单标签内并且工作正常所以我很确定这不是我的表单的问题。

Api.js

const baseUrl = '/api'

export const newEnquiry = formData => {
  return axios.post(`${baseUrl}/enquiries/`, formData)
}

Views.py

class EnquiryListView(APIView):

    def get(self, _request):
        enquiries = Enquiries.objects.all() 
        serialized_enquiries = EnquirySerializer(enquiries, many=True)
        return Response(serialized_enquiries.data, status=status.HTTP_200_OK)

    def post(self, request):
        created_enquiry = EnquirySerializer(data=request.data)
        if created_enquiry.is_valid():
          created_enquiry.save()
          return Response(created_enquiry.data, status=status.HTTP_201_CREATED)
        return Response(created_enquiry.errors)

serializers.py

class EnquirySerializer(serializers.ModelSerializer):

      class Meta:
        model = Enquiries
        fields = '__all__'

Answer 1

对于您遇到的这个问题，当错误发生时，无法读取 err.response.data 属性。如果没有错误，它将重定向您。在您的 Django 应用程序中，检查 error handler 对 return.

的假设

快速回顾 try/catch。

try {
 // if everything passes, run this block
} catch (err) {
 // if something goes wrong, run this block
}

在这种情况下，请务必检查您的完整错误是什么。它可能是 404 或完全出乎意料的东西。

ReactJS 表单提交 this.props.history.push('/downloads') 未链接到新页面

ReactJS form submit this.props.history.push('/downloads') not linking through to the new page

forms

django

history

push

reactjs