Реагировать на магазин обещаний массив объектов в состоянии

Question

Мне нужно сохранить результат запроса Firestore в состоянии моего компонента. Ниже мой код, всякий раз, когда я пытаюсь сохранить результат запроса (который возвращает объект или массив объектов) в моем состоянии, он отображается как неопределенный.

Получение этого сообщения об ошибке:

 Error getting documents:  TypeError: Cannot read property 'setState' of undefined
        at index.js:43
        at index.cjs.js:14701
        at index.cjs.js:3357
        at t.pt (index.cjs.js:1200)
        at t.pt (index.cjs.js:1200)
        at t.pt (index.cjs.js:1117)
        at t.forEach (index.cjs.js:3356)
        at t.forEach (index.cjs.js:14699)
        at index.js:41

        const PropertySearch = () => (
            <div>
            <PropertySearchWrapped />
            </div>
        )

        const INITIAL_STATE = {
          postCode: '',
          propertySearched: {},
          propertyList: {},
          error: null,
        };

        class SearchForProperty extends Component {
             constructor(props) {
                super(props);
                this.state = { ...INITIAL_STATE };
            }

            onChange = event => {
            this.setState({ [event.target.name]: event.target.value });
            };

            onSubmit = event => {
    event.preventDefault();

    var { postCode, error, propertySearched, propertyList} = this.state;
    return this.props.firebase.db.collection("property").where("postcode", "==", postCode)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            this.setState({
                propertyList: doc.data
            })        
            // Need to display this data in a component
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });
}

Answer 1

Причина, по которой вы получаете эту ошибку, заключается в том, что вы не используете функции стрелок в коде обещания. Нормальные функции, вероятно, теряют ссылку this на ваш компонент.

    var { postCode, error, propertySearched, propertyList} = this.state;
    return this.props.firebase.db.collection("property").where("postcode", "==", postCode)
    .get()
    .then((querySnapshot)=> {
        querySnapshot.forEach((doc)=> {
            // doc.data() is never undefined for query doc snapshots
            this.setState({
                propertyList: doc.data
            })        
            // Need to display this data in a component
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

Хотя, как только это сработает, вы, вероятно, столкнетесь с проблемой, когда propertyList устанавливается только с данными последнего snapShot, поэтому вам следует скорее всего, используйте querySnapshot.map вместо forEach, чтобы вы могли добавить список doc.data в propertyList вместо одного.

    var { postCode, error, propertySearched, propertyList} = this.state;
    return this.props.firebase.db.collection("property").where("postcode", "==", postCode)
    .get()
    .then((querySnapshot)=> {
            this.setState({
                propertyList: querySnapshot.map((doc)=> doc.data)
            })        
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });