Question

ReactJs显示错误：

无法读取未定义的属性setState。

我知道这个问题经常被问到，但是我发现的大多数解决方案都不能解决我当前的问题。

下面的代码用于将文件发布到服务器，并且工作正常。现在，如果我在Axios响应返回后立即实现以下代码：

this.setState({
    filename:res.data.filename,
    message:res.data.message,
});

它将显示该错误。请问我需要绑定哪个setState

这是代码

import React, { Component } from 'react';
import $ from 'jquery';
import axios, { post } from 'axios';

class FilePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value:'', 
      filename:'',
      myfile:'',
      submitted: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ submitted: true });

    var formData = new FormData();
    formData.append('myfile', $('#myfile')[0].files[0]);
    formData.append('filename', $('#filename').val());

    axios
      .post('http://localhost/api.php', formData)
      .then(function (res) {
        console.log(res);
        this.setState({
          filename:res.data.filename,
          message:res.data.message,
        });
      })
      .catch(function (err) {
        console.log(err.message);
      });
  }

  render() {
    const { submitted } = this.state;
    var style1 = {
      background: 'green',
      color: 'white',
      fontSize: 30
    };

    return (
      <form onSubmit={this.handleSubmit}  id="myform">
        <label>
         <div style={style1}> Testing Data </div>
         <input className="form-control" name="myfile" type="file" id="myfile" value={this.state.myfile} onChange={this.handleChange} />
         <b>filename:</b><input tyle="text" className="form-control" value={this.state.filename}  name="filename" onChange={this.handleChange} />
        </label>
        <input className="btn btn-primary" type="submit" value="Submit" id="btn"/>
      </form>
    );
  }
}

Answer 1

function(res)内部的范围已更改。试试这个吧。

axios.post('http://localhost/api.php', formData)
            .then((res) => {
            console.log(res);

           this.setState({
           filename:res.data.filename,
           message:res.data.message,

         });

ReactJs显示错误无法通过Axios表单提交读取未定义的属性setState

1 个答案: