Невозможно установить данные состояния, выбранные из Firestore для рендеринга ()

Question

Я хотел бы получить некоторые данные из Firestore, а затем эти данные должны быть установлены до this.setState(). Но это не может быть оказано.

Мой код:

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
       item: null,
    }

    let self = this;
    const { id } = this.props.match.params;
    firebase
      .firestore()
      .collection("items")
      .doc(id)
      .get()
      .then(function(doc) {
        self.setState({
          item: doc.data()
        });
      });
  }
}

render() {
  console.log("item", this.state.item);
  // null
  return(
    <p>{item.name}</p>
  )
}

Я пытался настроить firebase() в componentDidMount(). Но это не удалось ...

И я попытался обновить код Firebase, как показано ниже, но это не удалось.

    firebase
      .firestore()
      .collection("items")
      .doc(id)
      .get()
      .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          self.setState({ item: doc.data() });
        });
      });

Answer 1

getDerivedStateFromProps = (props, state) =>  {
const { id } = props.match.params;
if(id){
firebase
  .firestore()
  .collection("items")
  .doc(id)
  .get()
  .then(function(doc) {
    this.setState({
      item : doc.data()  // use item here 
    });
  })
  .catch(err=>console.log(err))
 }
}

Answer 2

self.setState({
          room: doc.data()
        });

в приведенном выше коде вы не обновляете элемент. Может быть изменить это следующим образом?

self.setState({
              item: doc.data()// or any value using doc as per your needs
            });