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

Question

1programmer @1programmer

React

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

Есть 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 нужно кликнуть дважды. В чем может быть проблема ?

Вопрос задан более трёх лет назад
1415 просмотров

6 комментариев

Подписаться 1 Простой 6 комментариев

Антон Спирин @rockon404 Куратор тега React

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

Написано более трёх лет назад
Lynn «Кофеман» @Lynn

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

Написано более трёх лет назад

1programmer @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

Написано более трёх лет назад

Антон Спирин @rockon404 Куратор тега React

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

Написано более трёх лет назад
1programmer @1programmer Автор вопроса

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

Написано более трёх лет назад
Антон Спирин @rockon404 Куратор тега React

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

Написано более трёх лет назад

Решения вопроса 2

3 комментария

4 комментария

1programmer @1programmer Автор вопроса

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

Написано более трёх лет назад
Роман Александрович @RomReed

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

Написано более трёх лет назад
1programmer @1programmer Автор вопроса

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

Написано более трёх лет назад
Антон Спирин @rockon404 Куратор тега React
Роман Александрович, 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'); // выполнится первым
Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

React

Простой
В чем заключается суть оптимизации скорости обновления компонентов через useReducer?
- 1 подписчик
- вчера
- 75 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 84 просмотра
0

ответов
React

Простой
Почему Vite/Rollup не может зарезолвить абсолютные импорты?
- 1 подписчик
- вчера
- 45 просмотров
1

ответ
React

Простой
Как решить проблему с манифестом в CRA-приложении?
- 1 подписчик
- 22 апр.
- 42 просмотра
0

ответов
React

+2 ещё

Средний
Какие есть WYSIWYG редакторы для мини-приложений ВК?
- 1 подписчик
- 22 апр.
- 45 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как получить актуальные данные в state при использовании server side event (в момент срабатывания события) в компоненте React?
- 1 подписчик
- 20 апр.
- 78 просмотров
1

ответ
React

Простой
Как получить значение из стейта если он еще не обновился?
- 1 подписчик
- 20 апр.
- 54 просмотра
0

ответов
JavaScript

+1 ещё

Средний
Почему не берутся данные из Props при вызове функции ПО КЛИКУ?
- 1 подписчик
- 20 апр.
- 63 просмотра
0

ответов
React

+1 ещё

Простой
Как реализовать Микрофронтенд с использованием Vite с Typescript?
- 1 подписчик
- 19 апр.
- 54 просмотра
0

ответов
React

Простой
У меня react up ложу .env REACT_APP_PASSWORD=пароль Локально все ок Но на гите не видит..почему?
- 1 подписчик
- 19 апр.
- 69 просмотров
0

ответов
Показать ещё Загружается…

Frontend React

Glob-com

от 100 000 ₽

React разработчик

Uptrade

от 150 000 до 200 000 ₽

JS|React Native разработчик

Венста • Киров

от 60 000 до 120 000 ₽

Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL

25 апр. 2024, в 05:57

3000 руб./за проект

Правки в webApp готового и написанного телеграмм бота next, tailwind

25 апр. 2024, в 05:29

25000 руб./за проект

Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот

25 апр. 2024, в 04:38

10000 руб./за проект

Rtfm. Это написано в первых строках документации
Антон Спирин,
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 openCurrentUserInfo={this.openCurrentUserInfo} /> </ChatWrapper> ) } }

ChatHeader
const ChatHeader = ({ openCurrentUserInfo, }) => { return ( <React.Fragment> <ChatHeaderWrapper> <CurrentUserInfo openCurrentUserInfo={openCurrentUserInfo} </ChatHeaderWrapper> </React.Fragment> ) }

CurrentUserInfo
const CurrentUserInfo = ({ openCurrentUserInfo }) => { const handleClick = event => { let type = 'rightMenu' openCurrentUserInfo(event, conversation, type) }; return ( <React.Fragment> <UserInfoWrapper> <UserNameWrapper onClick={e => handleClick(e)}> </UserNameWrapper> </UserInfoWrapper> </React.Fragment> ) } export default CurrentUserInfo
1programmer, из приложенного кода не ясно что такое conversation.
Антон Спирин, просто объект, можно хоть 1234 присваивать в любом случае будет такой эффект
1programmer, что-то я ваш пример посмотрел не внимательно. Вы же вызываете console.log до обновления состояния. Добавил ответ.

Answer 1 · 2019-05-23 11:40:15

Роман Александрович @RomReed

JavaScript, Flutter, ReactNative, Redux, Firebase

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

Ответ написан более трёх лет назад

3 комментария

Answer 2 · 2019-05-23 12:08:31

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);
}

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт