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

Question

我有一个 API，它为我提供具有以下属性的对象:id、title、url、thumbnailUrl。

我有一个负责卡的模块，该卡具有以下代码:

export interface Manual {
  id?: string | number;
  url: string;
  title: string;
  thumbnail?: string | null;
}

我有一个模块负责创建实际的 HelpCard 组件，其代码如下:

interface Props {
  card: Manual;
  deleteProduct: Function;
  editProduct: Function;
  type: "videos" | "manuals";
}

interface State {
  editedCard: Manual;
  imageLoading?: boolean;
  tooManyRequests?: boolean;
}

export default class HelpCard extends Component<Props, State> {
  state = {
    editedCard: {
      id: -1,
      url: "",
      title: "",
      thumbnail: ""
    },
    imageLoading: true,
    tooManyRequests: false
  };

  componentDidMount() {}

  onEditClick = (card: Manual): void => {
    this.setState({ editedCard: card });
  };

  updateEditCard = (event: React.FormEvent<HTMLInputElement>, key: "url" | "title" | "thumbnail"): void => {
    const value = event.currentTarget.value;
    this.setState((prevState: State) => {
      return { editedCard: { ...prevState.editedCard, [key]: value } };
    });
  };

  render() {
    const { card } = this.props;
    const { editedCard } = this.state;
    return (
      <React.Fragment>
        <div className="card">
          <div className="card-img">
            {this.state.imageLoading ? <img src={placeholder} style={{ width: "100%", height: "100%" }}></img> : null}
            <img
              className="cardImage"
              style={
                this.state.tooManyRequests
                  ? { display: "none" }
                  : this.state.imageLoading
                  ? { display: "null" }
                  : { display: "block" }
              }
              onLoad={() => this.setState({ imageLoading: false })}
              onError={() => this.setState({ tooManyRequests: true })}
              src={card.thumbnail ? card.thumbnail : placeholder}
            />
          </div>

          <div className="card-body">
            <div style={{ textAlign: "center" }}>
              <span className="card-title">{card.title}</span>
              <hr></hr>
            </div>
            <div className="card-buttons">
              <div className="group">
                <Modal
                  trigger={
                    <Button
                      onClick={() => this.onEditClick(card)}
                      style={{ width: "90px" }}
                      icon="mode_edit"
                      className="btn blue-outline"
                      href="#!">
                      Edit
                    </Button>
                  }>
                  <form
                    onSubmit={(e) => e.preventDefault()}
                    id="videoCardEdit"
                    style={{ width: "auto", height: "auto" }}>
                    <div>
                      <div>
                        <label>Title:</label>
                        <input
                          className="input"
                          style={{ width: "100%" }}
                          name="videoCardTitle"
                          onChange={(e: React.FormEvent<HTMLInputElement>) => this.updateEditCard(e, "title")}
                          value={editedCard.title}></input>
                      </div>
                      <div>
                        <label>URL:</label>
                        <input
                          className="input"
                          style={{ width: "100%" }}
                          name="videoCardURL"
                          onChange={(e: React.FormEvent<HTMLInputElement>) => this.updateEditCard(e, "url")}
                          value={editedCard.url}></input>
                      </div>
                      <div>
                        <label>Thumbnail URL:</label>
                        <input
                          className="input"
                          style={{ width: "100%" }}
                          name="videoCardThumbnail"
                          onChange={(e: React.FormEvent<HTMLInputElement>) => this.updateEditCard(e, "thumbnail")}
                          value={editedCard.thumbnail}></input>
                      </div>
                      <br></br>
                    </div>
                    <Button
                      type="submit"
                      className="btn green-outline"
                      icon="check"
                      length="fullwidth"
                      style={{
                        float: "left"
                      }}
                      onClick={() =>
                        this.props.editProduct(
                          card.id,
                          editedCard.title,
                          editedCard.url,
                          editedCard.thumbnail,
                          this.props.type
                        )
                      }>
                      confirm
                    </Button>
                    <br></br>
                  </form>
                </Modal>
                <Button
                  icon="delete"
                  style={{ width: "90px" }}
                  onClick={() => this.props.deleteProduct(card.id, this.props.type)}
                  className="btn red-outline">
                  Delete
                </Button>
              </div>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

然后该卡将显示在 HelpList 组件上，代码如下:

export default class HelpList extends Component<Props, State> {
  state = {};

  async componentDidMount() {}

  render() {
    console.log(this.props.data);

    return (
      <div className="row">
        {this.props.data.map((card: Manual) => (
          <HelpCard
            card={card}
            key={card.id}
            deleteProduct={this.props.onDelete}
            editProduct={this.props.onEdit}
            type={this.props.type}
          />
        ))}
      </div>
    );
  }
}

最终列表显示在我的 HelpAdmin.view.tsx 模块上，该模块加载我的卡片，并具有所有 API 功能，例如我的创建/删除/编辑调用。

状态和负载函数如下:

export class HelpAdminView extends Component<Props, State> {
  state = {
    title: "",
    thumbnail: "",
    url: "",
    error: null,
    isEditProduct: true,
    isAddProduct: true,
    whichRadioSelected: "video",
    videos: [],
    manuals: []
  };
  componentDidMount() {
    this.loadAdminHelpCard("videos");
    this.loadAdminHelpCard("manuals");
  }

  loadAdminHelpCard = (type: "videos" | "manuals"): void => {
    const url = `${BASE_API_URL}/${type}`;
    axios
      .get(url)
      .then((res) => {
        this.setState({ [type]: res.data } as any);
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });
  };

最后，我的编辑功能是这样的:

editProduct = (id: any, title: string, url: string, thumbnail: string, type: "videos" | "manuals") => {
    const apiUrl = `${BASE_API_URL}/${type}/${id}`;

    axios
      .put(apiUrl, {
        title: title,
        url: url,
        thumbnail: thumbnail
      })
      .then((response: any) => {
        // ? UPDATE the list with new card information here
      })
      .catch(function(error) {
        console.log(error);
      });
  };

当用户单击“编辑”时，卡片将从 Prop 中复制并进入状态。现在仅编辑卡的状态。 (this.state.editedCard) 当用户单击提交时，editedCard 详细信息将提供给 editProduct(id、标题、缩略图等...)。在 HelpAdmin.view.tsx 中，正在进行 API 调用，这将使用新的卡详细信息更改数据库。

我想要弄清楚的是如何在视频/手册中更新我们的卡，以便它反射(reflect)在用户界面中。 (成功的 API 调用)

预先感谢您的阅读和帮助!

Answer 1

当更新操作结束时，您可以获取当前数据。

.then((response: any) => {
    //here get the recent data from your api
    // ? UPDATE the list with new card information here
    this.loadAdminHelpCard("videos");
    this.loadAdminHelpCard("manuals");
  })

因此这将更新状态，导致父组件重新渲染，这也会重新渲染子组件，因此您的 Card 组件将获取新数据。

所有editProduct功能:

  editProduct = (id: any, title: string, url: string, thumbnail: string, type: "videos" | "manuals") => {
    const apiUrl = `${BASE_API_URL}/${type}/${id}`;

    axios
      .put(apiUrl, {
        title: title,
        url: url,
        thumbnail: thumbnail
      })
      .then((response: any) => {
        //here get the recent data from your api
        // ? UPDATE the list with new card information here
        this.loadAdminHelpCard("videos");
        this.loadAdminHelpCard("manuals");
      })
      .catch(function(error) {
        console.log(error);
      });
  };