开发者问题收集

React 中的 Axios 获取方法响应无法在我的博客应用程序中显示从 firebase 获取数据作为数组

2018-09-30
2109
javascript reactjs firebase axios

我想知道是否有人可以帮助我。我已经阅读了许多 StackOverflow 对此的回答，以及其他很棒的文章，例如 这篇文章 ，但我还无法实现答案。

我在 React 中有一个简单的博客应用程序。我有一个表单来提交数据，我还有单独的帖子和帖子组件。我实际上可以将数据发送到我的 firebase 数据库。我也在 GET 方法中获得了响应，但我无法按我需要的方式显示响应。我需要一个帖子数组，每个帖子都有一个标题和内容，以便我可以将其数据发送到我的 Post 组件。但我总是收到类似（无法在响应上使用映射）的错误，而且我实际上无法从数据库中获取数组。我甚至想知道我是否以正确的格式发送数据。请检查下面的代码并帮助我。谢谢。 

// 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 数据库的屏幕截图： 我的 Firebase 数据库结构

2个回答

有趣的是，我发现很少有人提及它。 这是整个 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>
        );
    }
}

实际上，当我第一次阅读 这个问题 时，您不应该依赖 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 和其他生命周期方法，您可能无法在控制台中看到更新的数据，但您实际上需要在响应中使用它。状态已更新，但您无法在该方法中看到它。

azad6026
2018-10-04

虽然不是数据库专家，但我认为您的数据库结构有点奇怪，并且只会在后续过程中造成问题，尤其是在编辑/更新单个帖子时。理想情况下，它的结构应类似于 JSON 数组： 

posts: [
  {
    id: "LNO_qS0Y9PjIzGds5PW",
    title: "Example title",
    content: "This is just a test"
  },
  {
    id: "LNOc1vnvA57AB4HkW_i",
    title: "Example title",
    content: "This is just a test"
  },
   ...etc
]

相反，它的结构应类似于 JSON 对象： 

"posts": {
  "LNO_qS0Y9PjIzGds5PW": {
     "post": {
       "title": "Example title",
       "content": "This is just a test"
     }
   },
   "LNOc1vnvA57AB4HkW_i": {
      "post": {
       "title": "Example title",
       "content": "This is just a test"
     }
   },
   ...etc
}

无论如何，您的项目应该有一个父 Posts container-component ，用于控制您的所有状态和数据获取，然后将其 state 和类 methods 传递给组件 children 。然后 children 可以相应地更新或显示父级的 state 。

或

您应该将 Posts container-component 分开，以便它显示找到的帖子或“未找到帖子”组件。然后，让您的 Posts Form 组件成为它自己的/非共享的组件，其唯一功能是显示表单并将其提交给数据库。

由您决定，并根据您认为符合您需求的方式决定。

工作示例： https://codesandbox.io/s/4x4kxn9qxw （下面的示例有一个与许多子组件共享的 container-component ）

注意：如果将 posts 更改为空数组 [] ，而不是 fetchData() 的 this.setState() 函数中的 data ，则可以将 PostForm 显示在 /posts 路由下！

例如： .then(({ data }) => this.setState({ isLoading: false, posts: [] }))

index.js 

import React from "react";
import { render } from "react-dom";
import App from "./routes";
import "uikit/dist/css/uikit.min.css";
import "./styles.css";

render(<App />, document.getElementById("root"));

routes/index.js 

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Home from "../components/Home";
import Header from "../components/Header";
import Posts from "../containers/Posts";

export default () => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/posts" component={Posts} />
        <Route path="/postsform" component={Posts} />
      </Switch>
    </div>
  </BrowserRouter>
);

containers/Posts.js 

import isEmpty from "lodash/isEmpty";
import React, { Component } from "react";
import axios from "axios";
import PostsForm from "../components/postsForm";
import ServerError from "../components/serverError";
import ShowPosts from "../components/showPosts";
import Spinner from "../components/spinner";

export default class Posts extends Component {
  state = {
    content: "",
    error: "",
    isLoading: true,
    posts: [],
    title: ""
  };

  componentDidUpdate = (prevProps, prevState) => {
    // check if URL has changed from "/posts" to "/postsform" or vice-versa
    if (this.props.location.pathname !== prevProps.location.pathname) {
      // if so, check the location
      this.setState({ isLoading: true }, () => this.checkLocation());
    }
  };

  componentDidMount = () => this.checkLocation();

  checkLocation = () => {
    // if the location is "/posts" ...
    this.props.location.pathname === "/posts"
      ? this.fetchData() // then fetch data
      : this.setState({  // otherwise, clear state
          content: "",
          error: "",
          isLoading: false,
          posts: [],
          title: ""
        });
  };

  // fetches posts from DB and stores it in React state
  fetchData = () => {
    axios
      .get("firebaseURL/posts.json")
      .then(({ data }) => this.setState({ isLoading: false, posts: data }))
      .catch(err => this.setState({ error: err.toString() }));
  };

  // handles postsForm input changes { content: value , title: value }
  handleChange = e => this.setState({ [e.target.name]: e.target.value });

  // handles postsForm form submission
  handleSubmit = event => {
    event.preventDefault();
    const { content, title } = this.state;

    alert(`Sumbitted values: ${title} - ${content}`);

   /* axios.post("firebaseURL/posts.json", { post: { title, content }})
        .then(({data}) => this.setState({ content: "", posts: data, title: "" }))
        .catch(err => this.setState({ error: err.toString() }))
   */
  };

  // the below simply returns an if/else chain using the ternary operator
  render = () => (
    this.state.isLoading // if isLoading is true...
      ? <Spinner />  // show a spinner
      : this.state.error  // otherwise if there's a server error...
         ? <ServerError {...this.state} />  // show the error
         : isEmpty(this.state.posts) // otherwise, if posts array is still empty..
            ? <PostsForm  // show the postForm
                {...this.state}
                handleChange={this.handleChange}
                handleSubmit={this.handleSubmit}
              />
            : <ShowPosts {...this.state} /> // otherwise, display found posts!
  );
}

组件/帖子sForm.js 

import React from "react";

export default ({ content, handleSubmit, handleChange, title }) => (
  <form
    style={{ padding: "0 30px", width: 500 }}
    className="new-post-form"
    onSubmit={handleSubmit}
  >
    <label>
      Post title
      <input
        style={{ marginBottom: 20 }}
        className="uk-input"
        type="text"
        name="title"
        onChange={handleChange}
        placeholder="Enter post title..."
        value={title}
      />
    </label>
    <label>
      Post content
      <input
        style={{ marginBottom: 20 }}
        className="uk-input"
        type="text"
        name="content"
        onChange={handleChange}
        placeholder="Enter post..."
        value={content}
      />
    </label>
    <button 
      disabled={!title || !content}
      className="uk-button uk-button-primary" 
      type="submit"
    >
      Submit
    </button>
  </form>
);

components/showPosts.js 

import map from "lodash/map";
import React from "react";

export default ({ posts }) => (
  <div className="posts">
    {map(posts, ({ post: { content, title } }, key) => (
      <div key={key} className="post">
        <h2 className="post-title">{title}</h2>
        <hr />
        <p className="post-content">{content}</p>
      </div>
    ))}
  </div>
);

components/serverError.js 

import React from "react";

export default ({ err }) => (
  <div style={{ color: "red", padding: 20 }}>
    <i style={{ marginRight: 5 }} className="fas fa-exclamation-circle" /> {err}
  </div>
);
Matt Carlotta
2018-10-01