按下按钮后在 React 中重新填充/刷新表

Posted 2023-02-16

技术标签:

【中文标题】按下按钮后在 React 中重新填充/刷新表【英文标题】：Repopulating/Refresh table in React after pressing a button 【发布时间】：2021-12-17 06:36:59 【问题描述】：

我有一个input-text，它允许用户写订单号，我有一个button，它验证订单是否存在或是否已被使用。

如果订单有效，它应该检索该订单的产品（mongodb 和meteor）及其详细信息。用户第一次验证订单时，它工作得很好。但是，如果用户输入另一个订单，表格将不会重新填充，除非用户再次按下button（按下一次之后）。这是一个动态表。

//Validating the order and Bringing the data of that Order
  validateOrder = () => 
const  products, productsPackaging, anotherCai  = this.state;
const cai = document.getElementById('cai').value;
if (cai && cai !== '') 
  this.setState( validating: true );
  Meteor.call('getcai', cai, (err, res) => 
    this.setState( validating: false );
    if (!err) 
      if (res.validated) 
        toastr.success('...');
       else 
        toastr.info('...');
      
      const tempProducts = [];
      const tempProductsPackaging = [];
      let tempCounter = 0;
      let tempAnotherCai = false;
      console.log(res);
      if (res.products && res.products.length > 0) 
        if (productsPackaging.length > 0) 
          tempAnotherCai = true;
        
        for (let index = 0; index < res.products.length; index++) 
          const element =  fakeId: `id-$index`, articleId: res.products[index].Articulo_Id, originalAmountPills: res.products[index].amount ;
          const element2 =  ...res.products[index], fakeId: `id-$index` ;

          tempProducts.push(element);
          tempProductsPackaging.push(element2);
        
        tempCounter = res.products.length - 1;
      
      this.setState(
        validated: res.validated,
        productsPackaging: tempProductsPackaging,
        products: tempProducts,
        counterId: tempCounter,
        anotherCai: tempAnotherCai,
      );
     else 
      toastr.info(err.error);
    
  );
 else 
  toastr.info('...');

表格和按钮

      render() 
    const 
      products, validated, validating,
     = this.state;
    return (
      <div className="modal fade" id="modalNewPackaging" tabIndex="-1" role="dialog" aria-labelledby="modalNewPackaging" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered" role="document" style= width: 1200, maxWidth: 'none' >

          <div className="modal-content" style= overflow: 'auto' >
            <div className="modal-header border-0">
              <h5 className="modal-title text-center">Agregar de Forma Manual</h5>
              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
    //Order Input
                  <div className="row form-group">
                    <div className="col-6">
                      <input
                        required
                        id="cai"
                        type="text"
                        className="form-control text-primary"
                        style= borderColor: '#001689' 
                        aria-describedby="inputGroup-sizing-sm"
                        aria-label="Small"
                        placeholder="CAI"
                        autoComplete="off"
                      />
    
                    </div>
                    <div className="col-6">
                      
                        validating ? (
                          <LoaderComponent />
                        ) : (
    //Button that Validates the Order
                          <button onClick=this.validateOrder type="button" className="btn btn-success">Validate</button>
    
                        )
                      
                    </div>
    
                  </div>
                  <form>
                    <div className="row form-group">
    
                      <div className="col-12">
                        <input
                          id="nameClient"
                          type="text"
                          maxLength="50"
                          className="form-control text-primary"
                          style= borderColor: '#001689' 
                          aria-describedby="inputGroup-sizing-sm"
                          aria-label="Small"
                          placeholder="Nombre de Paciente"
                          autoComplete="off"
                          disabled=!validated
                        />
                      </div>
                    </div>
                    
                      validating ? (
                        <LoaderComponent />
                      ) : validated ? (
                        <div className="container">
                          <div className="container" style= maxHeight: '250px', overflowX: 'auto', overflowY: 'auto' >
    
                            <div className="card">
                              <div className="card-body">
    
                                <table className="table" style= width: '100%' >
                                  <thead>
                                    <tr>
                                      <th>Product's Name</th>
                                         ...
                                    </tr>
                                  </thead>
                                  <tbody>
                                    
                                      products.map((product, index) => (
                                        <tr key=product.fakeId>
                                          <td>
                                            <input
                                              required
                                              defaultValue=this.defaultValue(product.fakeId, 'productName')
                                              id=`productName$product.fakeId`
                                              name="productName"
                                              type="text"
                                              className="form-control"
                                              style= borderColor: '#001689' 
                                              autoComplete="off"
                                              list="suggestions"
                                              
                                            />
              

                            </td>
                                              //...
  ))
                                
                              </tbody>
                            </table>
                </div>
              </div>
            </div>
          </div>
                  );

默认值

defaultValue = (fakeId, inputName) => 
    const  productsPackaging, anotherCai  = this.state;
    const index = productsPackaging.findIndex(function findIt(item) 
      return item.fakeId === fakeId;
    );

    if (index === -1) 
      return '';
    
    // console.log(fakeId);
    // console.log(index);
    // console.log('Iam in');
    if (inputName.includes('productName')) 
      console.log(productsPackaging[index].Articulo_Nombre);
      //if (!anotherCai) 
      return productsPackaging[index].Articulo_Nombre;
      //  else 
      //   document.getElementById(`productName$fakeId`).value = productsPackaging[index].Articulo_Nombre;
      //

【问题讨论】：

【参考方案1】：

如果您想根据输入的类型更改顺序。您必须在输入中的 onChange 事件中处理它。否则默认情况下需要单击按钮。

【讨论】：

【参考方案2】：

添加一个 useEffect 钩子并将状态作为依赖项传递给 useEffect 钩子，它将按预期工作。