Question

我需要从React.js前端发送一个数组到Django后端。除了数组return o1.toLowerCase().compareToIgnoreCase(o2.toLowerCase())外，我可以轻松发送所有变量。

我看到csvData返回了以下数据：

console.log("csvData", csvData)

这是称为NUM,COL1,COL2 1,300,500 2,566,VL的React组件的代码：

BatchFlights

主要内容

import React, { Component, Fragment } from 'react';
import TopControls from "./layout/batch/TopControls"
import MainContent from "./layout/batch/MainContent"
import BottomControls from "./layout/batch/BottomControls"
import styles from "./layout/styles/styles";
import { withStyles } from "@material-ui/core/styles";


class BatchFlights extends Component {

  constructor(props) {
      super(props);
      this.state = {
          csvData: [],
          temperature: 20,
          visibility: 5999.66,
          windIntensity: 8.0,
          prediction: 0,
          labelWidth: 0
      };
      this.handleChange = this.handleChange.bind(this);
  };

  componentDidMount() {
      this.fetchData();
  };

  updateDelay(prediction) {
    this.setState(prevState => ({
      prediction: prediction
    }));
  };

  setCsvData = csvData => {
    this.setState({
      csvData
    }, () => {
      console.log("csvData",this.state.csvData)
    });
  }

  fetchData = () => {
      const url = "http://localhost:8000/predict?"+
        '&temperature='+this.state.temperature+
        '&visibility='+this.state.visibility+
        '&windIntensity='+this.state.windIntensity+
        '&csvData='+this.state.csvData;

      fetch(url, {
        method: "GET",
        dataType: "JSON",
        headers: {
          "Content-Type": "application/json; charset=utf-8",
        }
      })
      .then((resp) => {
        return resp.json()
      })
      .then((data) => {
        this.updateDelay(data.prediction)
      })
      .catch((error) => {
        console.log(error, "catch the hoop")
      })
  };

  handleChange = (name, event) => {
    this.setState({
      [name]: event.target.value
    }, () => {
      console.log("csvData", csvData)
    });
  };


  handleReset = () => {
      this.setState({
          prediction: 0
      });
  };

  render() {
    return (

        <Fragment>

            <TopControls state={this.state} styles={this.props.classes} handleChange={this.handleChange} />

            <MainContent state={this.state} styles={this.props.classes} setCsvData={this.setCsvData} />

            <BottomControls state={this.state} styles={this.props.classes} fetchData={this.fetchData} handleReset={this.handleReset}/>

        </Fragment>

    );
  }
}

const StyledBatchFlights = withStyles(styles)(BatchFlights);
export default StyledBatchFlights;

CSVDataTable

import React, { Component, Fragment } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import CSVDataTable from './CSVDataTable';

class MainContent extends Component {
    render() {
        return (
          <Fragment>
              <CssBaseline />
              <main className={this.props.styles.mainPart}>
                  <CSVDataTable setCsvData={this.props.setCsvData} />
              </main>
          </Fragment>
        );
    }
}

export default MainContent;

但是当import React, { Component } from 'react'; import { CsvToHtmlTable } from 'react-csv-to-table'; import ReactFileReader from 'react-file-reader'; import Button from '@material-ui/core/Button'; const sampleData = ` NUM,COL1,COL2 1,300,500 2,566,VL `; class CSVDataTable extends Component { state={ csvData: sampleData }; handleFiles = files => { var reader = new FileReader(); reader.onload = (e) => { // Use reader.result this.setState({ csvData: reader.result }) this.props.setCsvData(reader.result) } reader.readAsText(files[0]); } render() { return <div> <ReactFileReader multipleFiles={false} fileTypes={[".csv"]} handleFiles={this.handleFiles}> <Button variant="contained" color="primary" > Load data </Button> </ReactFileReader> <CsvToHtmlTable data={this.state.csvData || sampleData} csvDelimiter="," tableClassName="table table-striped table-hover" /> </div> } } export default CSVDataTable;到达Django后端时，它是空的：

csvData

Answer 1

我相信问题是您正试图将数组csvData强制转换为字符串，并将字符串化数组作为参数附加到您的get请求fetchData中

'&csvData='+this.state.csvData;

如果csvData的值由数组中的数组组成，则当您通过以下方式将数组强制为字符串时：

'' + [[], [], []]  // "[object Object]"

如果您想保留当前的get函数，应该改用

'&csvData='+JSON.stringify(this.state.csvData);

，但是如果要处理高度嵌套的JSON对象，强烈建议您将get请求更改为post或put请求。

无法将数组类型的变量从React.js前端发送到Django后端

1 个答案: