Почему state обновляется только после второго клика?

Question

[1programmer]

Есть ChatContainer.

constructor(props) {
        super(props)
        this.openCurrentUserInfo = this.openCurrentUserInfo.bind(this)
        this.state = {
            showCurrentUserInfo: null
        }
    }

    

    openCurrentUserInfo(event, conversation, type) {
        this.setState({
            showCurrentUserInfo: conversation
        })
        console.log(this.state.showCurrentUserInfo)
    }

В нем есть 2 компонента, передаю в эти компоненты функцию openCurrentUserInfo, внутри компонентов есть еще компоненты, в них на клик вешаю функцию в которой выполняю openCurrentUserInfo. Почему при первом клике у меня this.state.showCurrentUserInfo == null , а при втором клике уже заполняется значениями, так же после третьего клика старые значения, после четвертого новые значения. То есть что бы изменить state нужно кликнуть дважды. В чем может быть проблема ?

Comments

[Антон Спирин]

Весь код покажите.

[Lynn «Кофеман»]

Rtfm. Это написано в первых строках документации

[1programmer]

Антон Спирин,

class ChatContainer extends React.Component {


    constructor(props) {
        super(props)
        this.openCurrentUserInfo = this.openCurrentUserInfo.bind(this)
        this.state = {
            showCurrentUserInfo: null
        }
    }



  openCurrentUserInfo(event, conversation, type) {
        this.setState({
            showCurrentUserInfo: conversation
        })
        console.log(this.state.showCurrentUserInfo)
    }


    render() {
        return (
                <ChatWrapper>
                    <ChatHeader
                     
                        <b>openCurrentUserInfo={this.openCurrentUserInfo}</b>
                   
                    />
                   

                </ChatWrapper>
           
        )
    }
}

ChatHeader

const ChatHeader = ({
    <b>openCurrentUserInfo</b>,
   
}) => {





    return (
        <React.Fragment>
            <ChatHeaderWrapper>
             <CurrentUserInfo

                      
                       <b> openCurrentUserInfo={openCurrentUserInfo}</b>
                        
            </ChatHeaderWrapper>
        </React.Fragment>
    )
}

CurrentUserInfo

const CurrentUserInfo = ({ openCurrentUserInfo }) => {




  const handleClick = event => {
    let type = 'rightMenu'
    <b>openCurrentUserInfo(event, conversation, type)</b>
  };

  

  return (
    <React.Fragment>
      <UserInfoWrapper>

        <UserNameWrapper onClick={e => handleClick(e)}>
         
        </UserNameWrapper>
      </UserInfoWrapper>
    </React.Fragment>
  )
}

export default CurrentUserInfo

[Антон Спирин]

1programmer, из приложенного кода не ясно что такое conversation.

[1programmer]

Антон Спирин, просто объект, можно хоть 1234 присваивать в любом случае будет такой эффект

[Антон Спирин]

1programmer, что-то я ваш пример посмотрел не внимательно. Вы же вызываете console.log до обновления состояния. Добавил ответ.

Answer 1

[Роман Александрович]

async openCurrentUserInfo(event, conversation, type) {
        await this.setState({
            showCurrentUserInfo: conversation
        })
        console.log(this.state.showCurrentUserInfo)
    }

Comments

[1programmer]

console.log() теперь ничего вообще не выводит

[Роман Александрович]

1programmer, проверьте что бы ваш conversation не был пустой строкой

[Mikhail Osher]

А с каких пор setState возвращает Promise?

Answer 2

[Антон Спирин]

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

this.setState({
  showCurrentUserInfo: conversation,
}, () => {
  console.log(this.state.conversation);
});

Очень удобно сверять состояние в componentDidUpdate:

componentDidUpdate(prevProps, prevState) {
  console.log('prev conversation: ', prevState.conversation);
  console.log('new conversation: ', this.state.conversation);
}

Comments

[1programmer]

Я пока писал спутал код и попробовал то что скинул выше Роман Александрович, объясните пожалуйста почему если использую async/await сразу устанавливаются значения ? А если нет, то при двойном клике

[Роман Александрович]

1programmer, потому что this.setState функция асинхронная т.е. она не ждет выполнения а идет дальше. async/await заставляет сначала выполниться setState а потом уже дальше выполниться код.

[1programmer]

Спасибо всем.

[Антон Спирин]

Роман Александрович, 1programmer, на самом деле объяснение того, чтоawait this.setState() вообще работает немного сложнее. Вызов setState() как известно ничего не возвращает и await не ожидает ее завершения, для асинхронной функции вызов равносилен:
await undefined; что можно преобразовать в

Promise.resolve(undefined).then(() => /* остальной код */);

Получается следующий алгоритм:
1. Вызов setState, вызов асинхронный и ставится на очередь в выполнение при первой же возможности.
2. await получает undefined и делает мгновенный resolve, код после await так же будет выполнен при первой же возможности.

Очередь:

[ setState ] <--- Будет выполнен первым
[ код после await ]

По сути это хак и некорректное использование, но это работает. Работает потому что setState выполняется асинхронно, но без задержки.
С тем же setTimeout уже подобный трюк не сработает:

await setTimeout(() => console.log('second'), 0);
console.log('first');  // выполнится первым