时间戳

首页 > 解决方案 > 如何在不刷新页面的情况下查看更新列表

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

问题描述

我创建了一个管理控制面板，允许我从本地 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);
      });
  }

创建函数的代码如下：

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);
      });
  };

标签： javascriptreactjstypescript

解决方案

您可能在创建产品后实际上并没有返回数据，或者您返回的是一个空数组。当您刷新页面时，用于获取数据的 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；它是帮助我们理解错误的工具。

推荐阅读