После добавления данных в базу данных с помощью Ajax вызовов мой компонент TodosList должен переосмыслить sh и показать все задачи с добавленным новым после обновления с помощью другого вызова Ajax (эти вызовы php SELECT * утверждение), но этого не происходит; иногда он показывает новые данные, а иногда только старые, пока я не обновлю страницу sh или не добавлю новую задачу.
Разве роль setState() не в том, чтобы обновлять наш Просмотр новыми данными? Как мне заставить это работать? (Я добавил функцию обратного вызова в setState (), которая называется Console.log (this.state.todos), чтобы посмотреть, что произойдет, но, как я уже упоминал, иногда обновляется массив todos, а иногда нет, он показывает только старые данные, пока страница не обновится вручную или добавил новую задачу) Я использовал Axios, и XMLHTTPRequest с обещанием, но с той же проблемой. (На скриншоте консоли вы иногда видите, как длина массива не обновляется)
constructor(props) {
super(props);
this.state = {
todos: [],
currentTodoText: '',
currentTodoEditText: ''
};
this.todoFormTfHandler = this.todoFormTfHandler.bind(this);
this.todoFormBtnHandler = this.todoFormBtnHandler.bind(this);
this.todoCheckHandler = this.todoCheckHandler.bind(this);
this.todoEditTextHandler = this.todoEditTextHandler.bind(this);
this.todoEditHandler = this.todoEditHandler.bind(this);
this.todoRemoveCancelHandler = this.todoRemoveCancelHandler.bind(this);
this.makeRequest = this.makeRequest.bind(this);
}
//called whenever app started and when a todo is added to database to refresh results
getDataFromDataBase() {
//get all registred todos
//let requestResult = [];
/*const xhr = new XMLHttpRequest();
return new Promise(function(resolve, reject) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const requestResult = JSON.parse(xhr.responseText);
resolve(requestResult);
/*this.setState({ todos: requestResult });
console.log(requestResult);*/
/* } else {
reject({ status: xhr.status, statusText: xhr.statusText });
}
};
xhr.open('POST', 'http://localhost/React_ToDo_APP/to-do/src/PHPFiles/SelectAllTodos.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send();
});*/
//console.log(requestResult);
//this.setState({ todos: requestResult });
axios.post('http://localhost/React_ToDo_APP/to-do/src/PHPFiles/SelectAllTodos.php').then((res) => {
this.setState({ todos: res.data }, () => {
console.log(this.state.todos);
});
});
}
makeRequest = (url, method) => {
// Create the XHR request
var request = new XMLHttpRequest();
// Return it as a Promise
return new Promise(function(resolve, reject) {
// Setup our listener to process compeleted requests
request.onreadystatechange = function() {
// Only run if the request is complete
if (request.readyState !== 4) return;
// Process the response
if (request.status >= 200 && request.status < 300) {
// If successful
resolve(request.responseText);
} else {
// If failed
reject({
status: request.status,
statusText: request.statusText
});
}
};
// Setup our HTTP request
request.open(method || 'GET', url, true);
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// Send the request
request.send();
});
};
componentDidMount() {
/*this.getDataFromDataBase()
.then(function(data) {
this.setState({ todos: data });
console.log('wttttf');
})
.catch(function(error) {
console.log(error);
console.log('lolo');
});*/
/*
this.makeRequest('http://localhost/React_ToDo_APP/to-do/src/PHPFiles/SelectAllTodos.php', 'POST')
.then((data) => {
this.setState({ todos: data });
})
.catch(function(error) {
console.log('Something went wrong', error);
});*/
this.getDataFromDataBase();
}
todoFormTfHandler(e) {
/*used to save whats writed in the field*/
//const tmpTodoText = e.target.value;
const tmpTodoText = e.target.value;
this.setState({ currentTodoText: tmpTodoText });
}
todoFormBtnHandler(e) {
if (this.state.currentTodoText !== '') {
const tmpTodo = {
//id: this.state.todos.length + 1,
text: this.state.currentTodoText,
isDoneChecked: false,
isEditable: false,
isRemoved: false
};
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
/*if (xhr.readyState === 4 && xhr.status === 200) {
}*/
};
const tmpTodoJSON = JSON.stringify(tmpTodo);
xhr.open('POST', 'http://localhost/React_ToDo_APP/to-do/src/PHPFiles/AddTodo.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('data=' + tmpTodoJSON);
/*const tmpTodos = this.state.todos;
tmpTodos.push(tmpTodo);
this.setState({ todos: tmpTodos });*/
this.getDataFromDataBase();
/*this.makeRequest('http://localhost/React_ToDo_APP/to-do/src/PHPFiles/SelectAllTodos.php', 'POST')
.then(function(data) {
this.setState({ todos: data });
})
.catch(function(error) {
console.log('Something went wrong', error);
});*/
const tmpTodoText = '';
this.setState({ currentTodoText: tmpTodoText });
}
}
