时间戳

首页 > 解决方案 > 不确定如何将数据从前端应用程序传递到后端

reactjs - 不确定如何将数据从前端应用程序传递到后端

问题描述

我需要将数据从下面的“更改”变量发送到后端烧瓶路由。这是我的反应应用程序的方式-

import React, {useState, useEffect} from "react";
import ReactQuill from "react-quill";
import { Card, CardBody, Form, FormInput } from "shards-react";

import "react-quill/dist/quill.snow.css";
import "../../assets/quill.css";

function Editor(props) {
  const[change, setChange] = useState('')
  const handleChange = (value) => {
  setChange(value)
}
  console.log(change)
  console.log(JSON.stringify(change));

  const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(change)
    };

  useEffect( () => {
    fetch('http://127.0.0.1:5000/lang', requestOptions)
    .then(response => response.json())
    .then(data => setChange(change))
    console.log('datas')
  }, [] )

  return <Card small className="mb-3">
    <CardBody>
      <Form className="add-new-post" action="http://127.0.0.1:5000/lang" method="POST">
        <FormInput size="lg" className="mb-3" placeholder="Your Post Title" />
        <ReactQuill className="add-new-post__editor mb-1" value={change} onChange={handleChange} />
        <button class="ml-auto btn btn-accent btn-sm" type="submit"><i class="material-icons">file_copy</i> Publish</button>
      </Form>
    </CardBody>
  </Card>;
}

export default Editor;

我曾尝试使用上面的 useEffect 。在尝试将数据发布到烧瓶时，以下是它返回的错误：127.0.0.1 - - [06/Jun/2021 04:36:03] “POST /lang HTTP/1.1”500 - TypeError: 'NoneType' object is not可下标的

我在烧瓶中的后端服务器如下所示 -

from flask import Flask, render_template, jsonify, request #import objects from the Flask model
from flask_cors import CORS
from werkzeug.utils import secure_filename
import requests
import logging
import json
import pymongo
from pymongo import MongoClient
from flask_sqlalchemy import SQLAlchemy
from localStoragePy import localStoragePy
import config

app = Flask(__name__) #define app using Flask

languages = [{'title' : 'Blog Overview'}, {'subtitle' : 'Dashboard'}, {'file' : 'file'}, {'sm' : '4'}, { 'title2': 'Add New Post'}, {'subtitle2': 'Blog Posts'}]

@app.route('/', methods=['GET'])
def test():
    return jsonify({'message' : 'It works!'})

@app.route('/lang', methods=['POST'])
def addOne():
    language = {'title' : request.json['title'], 'subtitle' : request.json['subtitle'], 'sm' : request.json['sm'], 'title2': request.json['title2'],'subtitle2': request.json['subtitle2'] }
    languages.append(language)
    return jsonify(languages)

@app.route('/lang', methods=['GET'])
def returnAll():
    return jsonify(languages)


if __name__ == '__main__':
    app.run(debug=True, port=8080) #run app on port 8080 in debug mode

标签： reactjsflask

解决方案

在 AddOne 函数中更改request.json为。request.form

推荐阅读