Question

我有以下

   successSentToVendor() {
    // ... i truncated a bunch of code
   this.setState({
    alert: (
      <SweetAlert
        success
        style={{display: "block", marginTop: "-100px"}}
        title="Sent!"
        onConfirm={() => {
          // i want to change the "status" of the data.vendor_quotation here
          // and also hide the Send to Vendor button.
          // look at the DataProvider below for details
          this.hideAlert();
        }}
        confirmBtnCssClass={
          this.props.classes.button + " " + this.props.classes.success
        }
      >
        Quotation has been successfully sent to vendor.
      </SweetAlert>
    )
  });
  }

  render() {
    return <DataProvider
      endpoint={vendorQuotationDetailUrl(this.props.match.params.id)}
      render={data =>
        <div>
          {this.state.alert}
          <div align="right">
          <Button onClick={this.warningWithConfirmMessage.bind(this)}>Delete</Button>
          <Button onClick={this.warningForSentToVendor.bind(this)}>Send to Vendor</Button>
          </div>

          <QuotationForm title="Edit Quotation"
                         create_or_edit='edit'
                         handleSubmit={this.handleSubmit}
                         errors={this.state.errors} {...data.vendor_quotation}
                         quotation_line_items={data.quotation_line_items}/>
        </div>}/>
  }

数据提供者

import React, {Component} from "react";
import {withRouter} from 'react-router-dom';
import {myHistory} from "../../index";
import PropTypes from "prop-types";

class DataProvider extends Component {
  static propTypes = {
    endpoint: PropTypes.string.isRequired,
    render: PropTypes.func.isRequired
  };

  state = {
    data: [],
    loaded: false,
    placeholder: "Loading...",
  };

  componentDidMount() {
    fetch(
      this.props.endpoint,
      {
        headers: {
          Authorization: `Token ${localStorage.getItem('token')}`
        }
      }
    )
      .then(response => {
        if (response.status === 401) {
          localStorage.removeItem('token');
          myHistory.push("/accounts/login");
          return;
        }
        else if (response.status !== 200) {
          return this.setState({placeholder: "Something went wrong"});
        }
        return response.json();
      })
      .then(data => data && this.setState({data: data, loaded: true}));
  }

  render() {
    const {data, loaded, placeholder} = this.state;
    return loaded ? (data ? this.props.render(data) : <p>{placeholder}</p>) : <p>{placeholder}</p>;
  }
}

export default withRouter(DataProvider);

我不确定如何重新呈现DataProvider，因此在单击SweetAlert上的确认按钮后，它将获取最新的状态字段以进行报价。

要么

我以某种方式或{li>重新渲染了DataProvider
我可以将data.vendor_quotation.status更新为新值，并使DataProvider正确更新

第二个选项可能更好，因为我将第二次跳过数据获取只是为了更新1个字段，说实话。

此外，我希望能够在状态为“ sent_to_vendor”时隐藏“发送给供应商”按钮

现在，无论如何，它将在“删除按钮”旁边显示该按钮。

单击SweetAlert上的确认后，如何重新呈现DataProvider组件并隐藏Button？

0 个答案: