javascript - 如何在不刷新页面的情况下查看更新的列表

Question

我创建了一个管理控制面板，允许我从本地 API 创建、编辑和删除数据集，然后在面板页面上将数据显示为卡片。

创建、编辑和删除功能均成功运行。编辑和删除功能允许我使用这些功能，它们会在页面上显示更新的列表，而无需我物理刷新页面。

编辑和删除功能的代码如下:

deleteProduct(id: any) {
    const { adminhelpcard } = this.state;
    const apiVideoUrl = `http://localhost:3000/videos/${id}`;

    axios
      .delete(apiVideoUrl, {})
      .then((response: any) => {
        this.setState({
          adminhelpcard: adminhelpcard.filter((adminhelpcard: SingleAdminHelpCard) => adminhelpcard.id !== id)
        });
      })
      .catch(function(error) {
        console.log(error);
      });
  }


editProduct(id: any, title: string, url: string, thumbnail: string) {
    const { adminhelpcard } = this.state;
    const apiVideoUrl = `http://localhost:3000/videos/${id}`;

    axios
      .put(apiVideoUrl, {
        title: title,
        url: url,
        thumbnail: thumbnail
      })
      .catch(function(error) {
        console.log(error);
      });
  }

create函数的代码如下:

createVideoProduct(title: string, url: string, thumbnail: string) {
    const { adminhelpcard } = this.state;
    const apiVideoUrl = `http://localhost:3000/videos/`;

    const options = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        title,
        url,
        thumbnail
      })
    };

    fetch(apiVideoUrl, options)
      .then((res) => res.json())
      .then(
        (result) => {
          this.setState(({ adminhelpcard }) => ({
            adminhelpcard: adminhelpcard.concat(result)
          }));
        },
        (error) => {
          this.setState({ error });
        }
      );
  }

我使用了 event.preventDefault();提交我的创建函数后阻止页面刷新的函数。随着 API 更新，卡片已成功创建，但直到我物理刷新页面后，卡片才会显示在列表中。

正在创建的卡片的状态如下:

interface State {
  url: string;
  title: string;
  adminhelpcard: SingleAdminHelpCard[];
  error: null;
  response: {};
  thumbnail: string;
  isEditProduct: boolean;
  isAddProduct: boolean;
  id: string;
  whichRadioSelected: string;
}
interface SingleAdminHelpCard {
  id: string;
  url: string;
  title: string;
  thumbnail: string;
}

据我所知，代码应该成功地完成其预期的任务，但我似乎无法理解为什么它不起作用。

预先感谢您的支持。

------------------编辑--------------------------

我添加了 loadAdminHelpCard 函数，并尝试在我的 clickHandler 和按钮 onClick 上调用它，但它似乎也不起作用。

loadAdminHelpCard = () => {
    axios
      .get(this.state.url)
      .then((res) => {
        this.setState((prevState) => {
          const adminhelpcard = prevState.adminhelpcard;
          return {
            adminhelpcard: [...prevState.adminhelpcard, ...res.data],
            url: res.data.next
          };
        });
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  };

Answer 1

您可能在创建产品后实际上并未返回数据，或者您返回的是空数组。当您刷新页面时，用于获取数据的 get 方法(此处未显示)将为您提供整个查询。因此，请确保在创建 videoProduct 后返回有效的数组。您可以通过 console.log(result) 验证您的答案，并亲自查看它是否正在返回数据。

你可以简化做事

createVideoProduct(title: string, url: string, thumbnail: string) {
const { adminhelpcard } = this.state;
const apiVideoUrl = `http://localhost:3000/videos/`;

const options = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    title,
    url,
    thumbnail
  })
};

fetch(apiVideoUrl, options)
  .then((res) => res.json())
  .then(
    (result) => {
      this.setState({ adminhelpcard: adminhelpcard.concat(result) });
    },
    (error) => {
      this.setState({ error });
    }
  );

}

不需要像你那样包装你的setState，并且额外使用eslint；它是一个帮助我们理解错误的工具。