Я использую React для извлечения данных из Firebase, но userItem не определен в моей функции рендеринга, почему

Question

Я могу видеть данные в console.log, но я не смог передать их для рендеринга функции с аутентифицированной пользовательской информацией из firebase. Может кто-нибудь помочь, пожалуйста. Я пробовал много способов, когда я использую this.setState ({..}) и использую this.state.userItem в возвращении, но он говорит мне, что функция setState не определена. Я застрял на этом в течение двух дней. и this.state.userItem также не определен и переходит к ошибке кода.

`класс AccInfo расширяет React.Component {state = {userItem: null}

  componentDidMount(){
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        var db = firebase.firestore()
        db.collection('user').doc(user.uid)
            .get()
            .then(snapshot => {
                const userItem = snapshot.data()
                console.log(userItem.name)
                this.setState({userItem: userItem})
            })
            .catch(error => console.log(error))

      } else {

      }})
  }
  render() {
    return( <div>
              <p>{userItem.name}</p>//this is where I mess up
            </div>
          )
    }
  }
export default AccInfo;`

Answer 1

Используйте функцию Arrow (=>), она сохранит контекст this. При использовании встроенной функции она создает собственную this, поэтому при выполнении this.setState({userItem: userItem}) state вашего компонента не обновляется.

firebase.auth().onAuthStateChanged((user) => {..// rest of the code..}