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

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

create函数的代码如下所示：

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

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

我使用了event.preventDefault；函数，用于防止在提交“我的创建”函数后刷新页面。当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 });
        }
      );
  }

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和ButtonOnClick上调用它，但它似乎也不起作用

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

---

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

你可以简化你的工作

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；这是一个帮助我们理解错误的工具。

createVideoProduct中then block中包含的结果参数是什么？@AndriiGolubenko您能澄清一下这是什么意思吗？当您成功发送POST请求时，什么类型的数据服务器会返回给您？@AndriiGolubenko您是指API中的数据吗？如果是这样，则返回标题、url、缩略图url和Id作为AdminHelpCard，AdminHelpCard是singleAdminHelpCard的数组。如果不是，那么我不确定你的意思。我是JS的新手，所以很多事情我都不熟悉——我试图通过重新调用我的卡片列表来返回数据，但这似乎不起作用。而且，你的证书代码对我不起作用。我得到以下类型为“{certificate:any；}”的错误参数不能分配给类型为“State | prevState:readonly”的参数响应得到了什么？当你记录结果时？控制台，结果如何？请确保使用adminhelpcard替换证书。myside犯了一个错误，我使用这些变量测试了您的代码。我应该在哪里调用此日志？在createVIdeoProduct->fetch.then.thenresult console.log中，您可以在设置状态fetchApideoUrl、options.thenres=>res.json.then result=>{console.logresult；this.setState之前记录结果{adminhelpcard:adminhelpcard.concatresult}；}，error=>{this.setState{error}；}；我得到了这个结果{title:hi here，url:www.google.com，缩略图：https://i.ytimg.com/vi/Um3BhY0oS2c/hqdefault.jpg，id:7}id:7缩略图：https://i.ytimg.com/vi/Um3BhY0oS2c/hqdefault.jpg 标题：你好，网址：www.google.com