我想知道是否有人可以帮助我。我已经阅读了许多 StackOverflow 对此的回答以及其他精彩文章，例如 this one我还无法实现答案。
我有一个简单的 React 博客应用程序。我有一个提交数据的表单，并且还有单独的帖子和帖子组件。我实际上可以将数据发送到我的 firebase 数据库。我还通过 GET 方法获得响应，但无法按需要显示响应。我需要一个帖子数组，每个帖子都有标题和内容，以便我可以将其数据发送到我的帖子组件。但我总是收到类似的错误( map 不能用于响应)，而且我实际上无法从数据库中获取数组。我什至想知道我是否以正确的格式发送数据。请检查下面的代码并帮助我。谢谢。
// 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
最佳答案
有趣的是，我发现的内容很少被提及。 这是整个 Posts 组件:
class Posts extends React.Component {
state = {
posts: [],
post: {
title: "",
content: ""
}
};
componentWillMount() {
const { posts } = this.state;
axios
.get("firebaseURL/posts.json")
.then(response => {
const data = Object.values(response.data);
this.setState({ posts : data });
});
}
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} = this.state;
const {posts} = this.state;
axios
.post("firebaseURL/posts.json", post)
.then(response => {
console.log(response);
const newPost = response.data;
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>
{posts}
<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>
);
}
}
实际上当我第一次读到this question时您不应依赖 console.log 来查看您的帖子(或您的回复数据)是否已更新。因为在 componentDidMount() 中，当您立即更新状态时，您将不会在控制台中看到更改。所以我所做的就是使用帖子上的 map 显示从响应中获得的数据，它显示了我的项目，因为我实际上有一个数组，尽管在控制台中看不到。这是我的 componentDidMount 代码:
axios.get("firebaseURL/posts.json").then(response => {
const data = Object.values(response.data);
this.setState({
posts: data
});
并显示帖子:
let posts = <p>No posts yet</p>;
if (this.state.posts) {
posts = this.state.posts.map(post => {
return <Post key={post.id} {...post} />;
});
}
它按预期显示了所有帖子。需要注意的是，一旦使用 componentDidMound 和其他生命周期方法，您可能看不到其中控制台中的更新数据，但您实际上需要像响应中那样使用它。状态已更新，但您无法在该方法中看到它。
关于javascript - React 中的 Axios get 方法响应无法在我的博客应用程序中显示从 firebase 作为数组获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52582967/