Question

我想知道是否有人可以帮助我。我已经阅读了许多StackOverflow关于此问题的答案以及诸如this one之类的其他好文章，但我还无法实现答案。

我在React中有一个简单的博客应用程序。我有一个提交数据的表格，我还有独立的职位和职位组成部分。我实际上可以将数据发送到我的Firebase数据库。我也可以通过GET方法获得响应，但是我无法根据需要显示响应。我需要一个帖子数组，每个帖子都有标题和内容，以便可以将其数据发送到我的Post组件。但是我总是收到一个错误，例如（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

Answer 1

有趣的是，我发现的东西很少被提及。这是整个帖子组件：

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（）中，当您立即更新状态时，您不会在控制台中看到更改。因此，我要做的是使用帖子上方的地图显示从响应中获取的数据，并显示了我的项目，因为我实际上有一个数组，尽管在控制台中看不到。这是我的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和其他生命周期方法，要小心一点，因为您可能看不到它们内部控制台中的更新数据，但实际上您需要在响应中按原样使用它。状态已更新，但是您无法在该方法中看到它。

Answer 2

不是数据库专家，但是我相信您的数据库结构有点奇怪，只会导致进一步的问题，尤其是在编辑/更新单个帖子时。理想情况下，它的结构应类似于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。

OR

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

由您决定并满足您的需求。

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

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

例如：PostForm

index.js

/posts

routes / index.js

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

containers / Posts.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"));

components / postsForm.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>
);

components / showPosts.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!
  );
}

components / serverError.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>
);

无法显示React中的Axios获取方法响应，无法在我的博客应用程序中以数组的形式从Firebase获取数据

2 个答案: