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

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

在上面的代码中，您不更新项目。可以将其修改为以下内容？

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

Answer 2

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

无法将从Firestore提取的状态数据设置为render（）

2 个答案: