未定义不是对象反应

Question

我在将状态设置为fetch api响应

的数据方面有问题

render() {
    function getCode(text) {
      fetch('url', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          "telephone": text, 
          "password": "123123"
        })
      }).then(response => response.json())
      .then(response => {
        console.log(this.state.text)
        console.log(this.state.uid)
        this.setState({uid : response["data"]["telephone"]})
        console.log(this.state.uid)
      // this.setState({uid: response["data"]["telephone"]})
      // console.log(this.state.uid); 
    })
  }

这是我的构造函数

constructor(props) {
   super(props);
   this.state = {
      text: '',
      uid: ''
   }
}

所以我只是在发送请求，需要保存州内的响应，但是，我遇到了一个错误：

TypeError：未定义不是对象（评估 '_this2.state.text'）]

评论的代码线是我修复它的尝试。

upd 1：这是API

的响应

{"data":{"telephone":["Some data"]}}

Answer 1

当组件挂载渲染函数

时，您会声明该功能

 class Something extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        text: '',
        uid: ''
      }
  }
   getCode = (text) => {
      fetch('url', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          "telephone": text, 
          "password": "123123"
        })
      }).then(response => response.json())
      .then(response => {
        console.log(this.state.text)
        console.log(this.state.uid)
        this.setState({uid : response.data.telephone})
        console.log(this.state.uid)
      // this.setState({uid: response["data"]["telephone"]})
      // console.log(this.state.uid); 
      })
  }
  render() {
    return(
      //...you can call it this.getCode(/..../)
    )
  }
}

Answer 2

问题是您在方法中创建函数，而函数中的this在方法中不参考this。

render() {
  function getCode(text) {
    // `this` in here is not the React component
  }
}

这是一个简单的示例：

class Example {
  method() {
    // `this` within a method (invoked via `.`) points to the class instance
    console.log(`method=${this}`);
   
    function functionInAMethod() {
      // because functionInAMethod is just a regular function and
      // the body of an ES6 class is in strict-mode by default
      // `this` will be undefined
      console.log(`functionInAMethod=${this}`);
    }
    
    functionInAMethod();
  }
}
new Example().method();

您可以将getCode提取为另一种类方法，并在需要时致电this.getCode()。

getCode() {
  // ...
}
render() {
  this.getCode();
}

其他选项是：

1. bind创建函数时getCode的this
2. 使用call或[apply][3]调用函数时设置this
3. 使用getCode使用箭头函数来保留嵌套功能的this
4. 将this绑定到render中的变量中，并在getCode中使用该变量，而不是this

⚠注：：您不想在render方法中提出HTTP请求，因为它被称为很频繁，请考虑以不太脆弱的方式进行操作。通常的模式是在构造函数或componentDidMount中进行操作。