У меня проблема с установкой состояния для данных из ответа 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.info(this.state.text)
console.info(this.state.uid)
this.setState({uid : response["data"]["telephone"]})
console.info(this.state.uid)
// this.setState({uid: response["data"]["telephone"]})
// console.info(this.state.uid);
})
}
вот мой конструктор
constructor(props) {
super(props);
this.state = {
text: '',
uid: ''
}
}
Итак, я просто отправляю запрос, и мне нужно сохранить ответ внутри состояния, но вместо этого я получаю сообщение об ошибке:
TypeError: undefined is not an object (evaluating '_this2.state.text')]
Строки кода, которые прокомментированы, являются моими попытками исправить это.
УПД 1: вот ответ от APi
{"data":{"telephone":["Some data"]}}
Я предполагаю, что в вашем ответе может не быть «данные» или «телефон».
@somsgod, на что это ссылается? А как сделать чтобы ссылались на этот класс?
позвольте мне увидеть структуру данных ответа. зарегистрируй это
Перед функцией getCode попробуйте var that = this; И внутри ответа используйте that.setState. Но поскольку используется функция стрелки, это должно было сработать. Но вы все равно можете попробовать это.
вы должны получить до того, как компонент будет смонтирован... используйте метод жизненного цикла componentDidMount
@Tholle, там более 100 строк, не уверен, что могу опубликовать это здесь, я имею в виду правила stackoverflow.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Проблема в том, что вы создаете функцию внутри метода, а 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.info(`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.info(`functionInAMethod=${this}`);
}
functionInAMethod();
}
}
new Example().method();Вы можете просто извлечь getCode как другой метод класса и вызывать this.getCode() при необходимости.
getCode() {
// ...
}
render() {
this.getCode();
}
Другие варианты:
bindthis из getCode при создании функцииcall или [apply][3], чтобы установить this при вызове функцииgetCode до сохранить this во вложенных функцияхthis к переменной в render и используйте эту переменную внутри getCode вместо this⚠ Примечание: Вы не хотите делать http-запросы в методе render, потому что он вызывается довольно часто, подумайте о том, чтобы сделать его менее хрупким. Обычно это делается в конструкторе или componentDidMount.
вы объявляете эту функцию, когда компонент монтируется внутри функции рендеринга
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.info(this.state.text)
console.info(this.state.uid)
this.setState({uid : response.data.telephone})
console.info(this.state.uid)
// this.setState({uid: response["data"]["telephone"]})
// console.info(this.state.uid);
})
}
render() {
return(
//...you can call it this.getCode(/..../)
)
}
}
Не могли бы вы включить весь компонент? Наличие функции
getCodeв методе рендеринга выглядит немного странно.