【发布时间】：2019-03-06 01:59:00
【问题描述】：
我想知道是否有人可以帮助我。我已经阅读了很多 StackOverflow 的答案以及其他很棒的文章，例如 this one，但我还无法实现答案。
我在 React 中有一个简单的博客应用程序。我有一个表格来提交数据，我也有单独的帖子和帖子组件。我实际上可以将数据发送到我的 firebase 数据库。我也得到了 GET 方法的响应，但我无法显示我需要的响应。我需要一组帖子，每个帖子都有一个标题和内容，以便我可以将其数据发送到我的帖子组件。但是我总是得到一个错误，比如（地图不能用于响应），我实际上无法从我的数据库中获取一个数组。我什至想知道我是否以正确的格式发送数据。请检查我下面的代码并帮助我。谢谢。
// The individual post component
const Post = props => (
<article className="post">
<h2 className="post-title">{props.title}</h2>
<hr />
<p className="post-content">{props.content}</p>
</article>
);
// The form component to be written later
class Forms extends React.Component {}
// The posts loop component
class Posts extends React.Component {
state = {
posts: null,
post: {
title: "",
content: ""
}
// error:false
};
componentDidMount() {
// const posts = this.state.posts;
axios
.get("firebaseURL/posts.json")
.then(response => {
const updatedPosts = response.data;
// const updatedPosts = Array.from(response.data).map(post => {
// return{
// ...post
// }
// });
this.setState({ posts: updatedPosts });
console.log(response.data);
console.log(updatedPosts);
});
}
handleChange = event => {
const name = event.target.name;
const value = event.target.value;
const { post } = this.state;
const newPost = {
...post,
[name]: value
};
this.setState({ post: newPost });
console.log(event.target.value);
console.log(this.state.post.title);
console.log(name);
};
handleSubmit = event => {
event.preventDefault();
const post = {
post: this.state.post
};
const posts = this.state.posts;
axios
.post("firebaseURL/posts.json", post)
.then(response => {
console.log(response);
this.setState({ post: response.data });
});
};
render() {
let posts = <p>No posts yet</p>;
if (this.state.posts) {
posts = this.state.posts.map(post => {
return <Post key={post.id} {...post} />;
});
}
return (
<React.Fragment>
<form className="new-post-form" onSubmit={this.handleSubmit}>
<label>
Post title
<input
className="title-input"
type="text"
name="title"
onChange={this.handleChange}
/>
</label>
<label>
Post content
<input
className="content-input"
type="text"
name="content"
onChange={this.handleChange}
/>
</label>
<input className="submit-button" type="submit" value="submit" />
</form>
</React.Fragment>
);
}
}
class App extends React.Component {
render() {
return (
<React.Fragment>
<Posts />
</React.Fragment>
);
}
}
// Render method to run the app
ReactDOM.render(<App />, document.getElementById("id"));
这是我的 firebase 数据库的屏幕截图： My Firebase database structure
【问题讨论】：
-
获取响应和设置状态在您的情况下不是一个大问题。尽管您的响应是一个对象而不是一个数组，但操作它并更新状态并不难。但是，这里的问题是您的 DB 形状不是同质的。有一个对象有一个 post 对象，有一个对象的 id 有一个 post 对象，甚至还有一个更奇怪的嵌套对象 :) 所以，首先，弄清楚这一点。我不太了解 Firebase，但是在您解决了这个问题之后，得到响应并对其进行操作非常容易。有
Object.keys之类的方法。 -
谢谢。正如我提到的，我的 post 方法可能有问题。我应该如何发送数据以将该数据作为数组而不是嵌套？
-
因此，您的主要问题与保存到 Firebase 数据库有关。您可以据此更改标题，也可以添加
firebase标签。 -
这不是我的主要问题。但我怀疑这是否是问题所在。我还是添加了 firebase。
标签： javascript reactjs firebase axios