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

Question

我基本上是在尝试编辑已输入的数据获取和放置。问题是我无法使用此代码引用正确的 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:

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

这将我引导到我添加新元素的相同表单，我认为我丢失了我想要进行编辑的 ID

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

Answer 1

欢迎来到 Stack Overflow 社区。

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

在 App.js 或任何应用程序路由定义组件中像这样更新相关路由。

<Route path="/edit-meetup/:id"> {/* Get your id */}
  <EditForm />
</Route>

然后像这样在您的 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;

也将 id 传递给 Link。

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

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

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

Trying to edit data with fetch put but cannot refer to proper id

javascript

reactjs

fetch-api