Блог

Я пытаюсь отправить текст / строку на мой server.js из поиска ввода, который проверяет в моей базе данных Postgres, соответствует ли элемент моему тексту / строке.

Моя консоль.журнал возвращает только совпадающие элементы, но на один «шаг» слишком поздно (если я напишу «to», он будет регистрировать только вещи, соответствующие «t»). Проблема, похоже, не связана с моим server.js , поскольку он регистрирует правильные результаты. Я действительно не понимаю, почему my console.log не работает, поскольку он находится в последующем .then() , что, на мой взгляд, означает, что состояние должно было быть обновлено.

Это похоже на проблему жизненного цикла или неправильное понимание обещаний и обратных вызовов, но я не знаю, где искать.

Вот начало моего компонента:

 class ItemSearch extends React.Component{
    constructor(props){
        super(props);
        this.state={
            searchfield: '',
            itemlist: []
        }
    }

    searchDatabase = (search) =>{
        this.setState({ searchfield: search.target.value }, this.fetchDatabase)
    }

    fetchDatabase() {
        fetch('http://localhost:3001/items/search', {
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                searchfield: this.state.searchfield
            })
        })
        .then(res => res.json())
        .then(items => {this.setState({itemlist: items})})
        .then(console.log(this.state.itemlist))
    }
 

Я попытался войти в систему как функция обратного вызова, поскольку я прочитал, что проблемы с обновлением setState можно решить с помощью функции обратного вызова, но это не сработало (ничего не регистрируется):

     .then(items => {this.setState({itemlist: items})}, () => {
        console.log(this.state.itemlist)
    })
 

Мой лучший результат был, когда я попытался console.log с componentDidUpdate помощью, который отправлял мне предыдущее состояние, а также новое состояние, что, я думаю, не идеально (слишком много вызовов?)

Когда вы вызываете a setState для компонента React, его состояние не обновляется немедленно; вместо этого компонент выполняет все обновления при «следующем тике», накапливая все setState сделанные вызовы.

В вашем случае, если вы хотите сделать свой setState вызов, чтобы приостановить цепочку обещаний, вы можете использовать следующий код:

 .then(
    items => new Promise(
        (resolve) => this.setState({itemlist: items}, resolve)
    )
)
.then(() => console.log(this.state.itemlist))
 

Он превратит ваш setState вызов в обещание, которое разрешится после того, как состояние будет установлено.

Также он исправляет ваш последний .then вызов, который должен принимать функцию, имеющую console.log(...) оператор, но не сам оператор.

Мой лучший результат был, когда я попытался утешить.войдите в систему с помощью componentDidUpdate, который отправлял мне предыдущее состояние, а также новое состояние, что, я думаю, не идеально (слишком много вызовов?)

Примечание: вы всегда должны пытаться использовать componentDidUpdate для сравнения состояний, независимо от того, сколько вызовов API выполняет пользовательский интерфейс, потому что это обеспечивает вам лучшую гибкость в отношении ваших действий при обновлении состояния.