开发者问题收集

undefined 不是对象 react-native

2019-02-23
1934

我在设置状态为来自 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: undefined is not an object (evaluating '_this2.state.text')]

注释的代码行是我尝试修复它。

UPD 1: 这是来自 APi 的响应

{"data":{"telephone":["Some data"]}}
2个回答

当组件在渲染函数内挂载时声明该函数

 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(/..../)
    )
  }

}
Bonjov
2019-02-23

问题是,您正在方法内创建一个函数,而函数内的 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 在创建时绑定 getCodethis 函数
  2. 使用 call 或 [ apply][3] 在调用函数时设置 this
  3. getCode 使用 箭头函数 保留 this 跨嵌套函数
  4. this 绑定到 render 中的变量,并在 getCode 中使用该变量,而不是 this

⚠ 注意 :您不想在 render 方法中发出 http 请求,因为它被调用得相当频繁,请考虑以不太脆弱的方式执行它。通常的模式是在构造函数或 componentDidMount 中执行它。

nem035
2019-02-23