【发布时间】：2020-03-25 02:49:04
【问题描述】：
我们正在开发 Firebase，我们希望在我们的 react js UI 中获取 firebase 数据。我们创建了用于在 Flask 中获取数据的 API。烧瓶代码如下
firebase = pyrebase.initialize_app(config) db = firebase.database()
# Receive data from Firebase RealTime Database @app.route("/") def home():
db_events = db.child().get().val()
return jsonify(db_events)
现在，在 React JS 组件中调用 API，代码如下：-
import React, { Component } from 'react';
import Temperature from './components/temperature';
class App extends Component {
state = {
contacts: [],
temperatures: [],
};
componentDidMount(){
fetch('192.168.1.2:5000')
.then( res => res.json() )
.then( (data) => {
this.setState({ contacts: data })
console.log(data)
})
.catch(console.log)
}
render() {
return (
<div></div>
);
}
}
export default App;
但是，当我们启动服务器时，控制台出现错误。错误如下：
SyntaxError：“JSON.parse：第 1 行第 1 列的意外字符 JSON 数据”
我们从 API 获得的 JSON 如下所示：
{
"DHT11": {
"Humidity": {
"-LuWFvEpzI9QAu_8eMEr": "49.00%",
"-LuWHg8WL90DOdkSKd5J": "48.00%",
"-LuWHmHpZ2veEKk1qqx2": "49.00%",
"-LuWHpUA9l-W6_ZBUV9W": "49.00%"
},
"LED_STATUS": "OFF",
"Temperature": {
"-LuWFvMVeyUhfKEpCxqe": "23.00°C",
"-LuWHgGX-tepMSXLRZiJ": "23.00°C",
"-LuWHmPdHdgBaQxkSbh4": "23.00°C",
"-LuWHpb-d4UbkomxayjN": "23.00°C",
"-LuWHsnQqIeUm1QGtixw": "23.00°C"
}
}
}
为什么我们会收到此错误，所有其他虚拟 API 都在这里工作。当我们检查 JSON 的格式时，它是有效的。我们从错误中得到的是我们的 JSON 格式的键不支持。
请帮助我们解决问题。先感谢您。
【问题讨论】：
-
您正在记录数据并且它正在工作。这意味着问题出在代码的其他地方。向我们展示您正在使用渲染数据的反应组件。您可以删除烧瓶代码。如果数据记录正确，则与此问题无关。
-
@JoshPittman 所有其他 API 都在工作。但是我们用 Flask 创建的这个不工作。 JSON 是正确的。
-
@JoshPittman 我已经更新了组件代码。
-
如果您说数据正确记录到控制台，那么您的 api 没有任何问题。尝试删除 fetch call 'componentDidMount'，你仍然得到错误吗？
标签： json reactjs firebase api firebase-realtime-database