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();
}
其他选项包括:
-
bind
在创建时绑定getCode
的this
函数 -
使用
call
或 [apply][3]
在调用函数时设置this
-
对
getCode
使用 箭头函数 以 保留this
跨嵌套函数 -
将
this
绑定到render
中的变量,并在getCode
中使用该变量,而不是this
⚠ 注意
:您不想在
render
方法中发出 http 请求,因为它被调用得相当频繁,请考虑以不太脆弱的方式执行它。通常的模式是在构造函数或
componentDidMount
中执行它。
nem035
2019-02-23