#firebase #react-native #firebase-realtime-database
#firebase #react-native #firebase-realtime-database
Вопрос:
Сбой при загрузке состояния, поскольку отображаемые данные еще не загружены.
Сначала я поместил серверную логику внутрь своего компонента, и это сработало, но мне нужно будет повторно использовать это на множестве компонентов, поэтому я решил поместить свою readUserDate
функцию во вспомогательный метод, но теперь он больше не работает.
Как я могу это исправить? (заранее благодарю)
import config from "./Config"
import firebase from "firebase";
export function readUserData(path) {
firebase.database().ref(path).on('value', function (snapshot) {
console.log(snapshot.val())
return snapshot.val()
});
}
import { readUserData } from "../../../server/Actions"
class Resultats extends Component {
constructor() {
super()
this.state = {
loading: true,
}
}
componentWillMount() {
let path = "devInc"
this.setState({
results: readUserData(path),
loading: false,
})
}
render() {
if (this.state.loading) {
return (
<View style={styles.container}>
<ActivityIndicator size="large" />
</View>
);
}
return (
<View style={styles.container}>
<Text>data</Text>
<Text>{this.state.results['-LbstaCmVt1nAWUrTw4T'].date}</Text>
</View>
);
}
}
Ответ №1:
Попробуйте это:
export const readUserData = async() => {
const snapshot = await firebase.database().ref(path).on('value');
return snapshot.val();
};
import { readUserData } from "../../../server/Actions"
class Resultats extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
results: null,
}
}
componentDidMount() {
this.readData();
}
readData = async() => {
let path = "devInc";
this.setState({ loading: true });
const results = await readUserData(path);
this.setState({ loading: false, results });
};
render() {
const { loading, results } = this.state;
if (loading) {
return (
<View style={styles.container}>
<ActivityIndicator size="large" />
</View>
);
}
if (!results) return null;
return (
<View style={styles.container}>
<Text>data</Text>
<Text>{results['-LbstaCmVt1nAWUrTw4T'].date}</Text>
</View>
);
}
}
Предложение
Это можно было бы лучше сделать с помощью действия redux
Комментарии:
1. по-прежнему не работает, ничего не отображается, потому что данные поступают с опозданием (я проверил с помощью console.log(snapshot.val())