Question

我有一个记事应用。因此，基本上，该应用程序会添加，编辑和删除注释。

用于编辑注释。我必须单击注释的编辑按钮。它应该触发重定向到UpdateNote组件的函数并将注释ID传递给更新组件。

我的帖子组件：

import React, { Component } from "react";
import axios from "axios";
import Post from "../../components/Post/Post";

class Posts extends Component {
  state = {
    posts: [],
    error: false
  };

  fetchNotes = () => {
    axios
      .get("http://localhost:3001/notes")
      .then(response => {
        //console.log(response.data);
        const posts = response.data;
        this.setState({ posts: posts });
      })
      .catch(error => {
        this.setState({ error: true });
      });
  };

  componentDidMount() {
    this.fetchNotes();
  }

  render() {
    let posts = <p style={{ textAlign: "center" }}>Something went wrong!</p>;

    if (this.state.posts.length === 0) {
      posts = <p>Oops no post to show...</p>;
    } else if (!this.state.error) {
      posts = this.state.posts.map(post => {
        //console.log(post._id);
        return (
          <Post
            key={post._id}
            title={post.title}
            text={post.text}
            id={post._id}
            fetchNotes={this.fetchNotes}
            edit={} // <-- HERE
          />
        );
      });
    }

    return <div>{posts}</div>;
  }
}

export default Posts;

我应该传递什么edit = {}。以便将其重定向到更新组件，并将post_.id传递给updatecomponent。谁能帮助我。

任何一种代码建议都会很有帮助

Answer 1

您可能想要导航到呈现UpdateNote组件的新路线，并且该路线应将post._id作为url参数。这样，您的UpdateNote组件将能够从其路由道具中获取帖子ID。

因此，如果您使用的是React Router DOM，则post组件上的编辑道具将具有以下功能：

export function renderIntoDocument(element: SFCElement<any>): void;

如何从当前组件重定向到另一个组件，以及如何将道具传递给React中的重定向组件

1 个答案: