时间戳

首页 > 解决方案 > 尝试使用 fetch put 编辑数据但无法引用正确的 id

javascript - 尝试使用 fetch put 编辑数据但无法引用正确的 id

问题描述

我基本上是在尝试编辑已经输入的数据女巫获取和放置。问题是我无法使用此代码引用正确的 id：

import { useHistory } from "react-router-dom";

import NewMeetupForm from "../components/meetups/NewMeetupForm";

function EditForm(props) {
  const history = useHistory();

  function addMeetupHandler(meetupData) {
    fetch(
      `https://reacttesty-2fbdf-default-rtdb.firebaseio.com/api/book/${props.id}.json`,
      {
        method: "PUT",
        body: JSON.stringify(meetupData),
        headers: {
          "Content-Type": "application/json",
        },
      }
    ).then(() => {
      history.replace("/");
    });
  }

  return (
    <section>
      <h1>Add New Meetupes</h1>
      <NewMeetupForm onAddMeetup={addMeetupHandler} />
    </section>
  );
}

export default EditForm;

在已经存在的对象上，我有一个链接：

<Link to={`/edit-meetup`}>
          <button>Edit</button>
        </Link>

这将我引导到添加新元素的相同形式，并且我认为在那里我丢失了我想要进行编辑的 ID

这段代码所做的只是创建一个带有 undefinedid 的新对象。我认为给它一个props.id意志只是简单的工作，因为我用DELETE很好的方法做了它，我认为我会用 PUT 方法达到相同的结果，但它不是那么简单。如果有人可以提供帮助，那就太好了。我对 fetch 不太了解，我正在学习反应，但我必须参考一些虚拟 API。

标签： javascriptreactjsfetch-api

解决方案

欢迎来到 Stack Overflow 社区。

请按照以下步骤解决您的问题。

  1. 像这样在 App.js 或应用程序路由定义的组件中更新相关路由。
<Route path="/edit-meetup/:id"> {/* Get your id */}
  <EditForm />
</Route>
  1. EditForm然后像这样在您的组件中访问该 id 。
import { useHistory, useParams } from "react-router-dom";

import NewMeetupForm from "../components/meetups/NewMeetupForm";

function EditForm(props) {
  const history = useHistory();
  const { id } = useParams(); // Access to your id 

  const addMeetupHandler = (meetupData) => {
    fetch(
      `https://reacttesty-2fbdf-default-rtdb.firebaseio.com/api/book/${id}.json`,
      {
        method: "PUT",
        body: JSON.stringify(meetupData),
        headers: {
          "Content-Type": "application/json",
        },
      }
    ).then(() => {
      history.replace("/");
    });
  }; // It's better if you can use an arrow function here

  return (
    <section>
      <h1>Add New Meetupes</h1>
      <NewMeetupForm onAddMeetup={addMeetupHandler} />
    </section>
  );
}

export default EditForm;
  1. 将id传递给Link也。
<Link to={`/edit-meetup/${id}`}>
  <button>Edit</button>
</Link>;

如果您需要进一步的支持，请告诉我。

推荐阅读