如何在不刷新頁面的情況下查看更新列表

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

創建function的代碼如下：

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(); function 在提交我的創建 function 后阻止頁面刷新。 隨着 API 的更新，該卡已成功創建，但在我物理刷新頁面之前，該卡不會顯示在列表中。

正在創建的卡的 state 如下：

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 function 並嘗試在我的 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； 它是幫助我們理解錯誤的工具。