不显示正确的数据，当reac表时，它会过滤掉，因为de editcell

问题描述

<p>

我正在为项目使用React，与此同时，我也在版本6中使用React表。

我有一种方法可以编辑反应表的单元格， 并且在过滤信息时出现问题，因为它无法显示正确的信息，并且我认为这是因为我正在使用两种不同的状态，一种状态用于过滤的信息，另一种状态用于完整的信息

因此，预期结果是即使定义了编辑单元格的方法，您也可以过滤正确的信息

    <p>**The form**</p>
    
        <pre>
    <code>
        renderEditable(cellInfo) {
          return (
            <div
              style={{ backgroundColor: "#fafafa" }}
              contentEditable
              suppressContentEditableWarning
              onBlur={e => {
                const data = [...this.state.postulantes];
                data[cellInfo.index][cellInfo.column.id] = e.target.innerHTML;
                data[cellInfo.index].full = data[cellInfo.index].age * 2;
                this.setState({ data });
              }}
              dangerouslySetInnerHTML={{
                __html: this.state.postulantes[cellInfo.index][cellInfo.column.id]
              }}
            />
          );
        }
        
        columns = [
          {
            id:'name',Header: 'Name',accessor: 'name',Cell: row => this.renderEditable(row),},{
            id:'lastname',Header: 'lastname',accessor: 'lastname',</code>
        </pre>
    
 <p>   **Handle data filter and table.**</p>
   

     
    <pre>
    <code>
        handleSetData = data => {
          console.log(data);
          this.setState({ filteredData:data});
          this.state.filteredData.map(function(el) {
           return Object.assign(el,{'filtrado':true});
          });
        };
        
        
         <div className="table-container hero-foot">
                <BusquedaGlobal
                data={this.state.postulantes}
                handleSetData={this.handleSetData}
              />
                <ReactTable className='table  is-bordered is-striped is-narrow is-hoverable is-fullwidth '
                data={this.state.filteredData}
                columns={this.columns}
                defaultPageSize={5}
                previousText={'Anterior'}
                nextText={'Siguente '}
                loadingText = {'Cargando...'}
                noDataText = {'No se encontraron registros'}
                pageText = {'Página'}
                ofText= {'de'}
                rowsText= {'Filas'} 
                />
              </div>
        </code>
        </pre>
    
   <p> **and the components busqueda (filter)**</p> 

    <pre>
    <code>
        import React from "react";
        export default class GlobalSearchComponent extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              searchInput: ""
            };
          }
          handleChange = event => {
            this.setState({ searchInput: event.target.value },() =>
              this.globalSearch()
            );
          };
          globalSearch = () => {
            let { searchInput } = this.state;
            let filteredData = this.props.data.filter(value => {
              return (
                value.name.toLowerCase().includes(searchInput.toLowerCase()) ||
                value.lastname.toLowerCase().includes(searchInput.toLowerCase()) ||
              );
            });
            this.props.handleSetData(filteredData);
          };
          render() {
            return (
              <>
                <br />
        
                <div className='container '> 
                  <div className="columns is-centered">
                  <label className='letter'>Búsqueda Global:</label>
                  </div>
                  <div className="columns is-centered">
                  <div className="column is-two-fifths">
                    <div className="control has-icons-left has-icons-right">
                <input
                  size="large"
                  name="searchInput"
                  value={this.state.searchInput || ""}
                  onChange={this.handleChange}
                  label="Búsqueda"
                  className = 'input'
                  type="text"
                  placeholder="Luis,Gonzales,12.345.678-9"
                />
                      <span className="icon is-small is-left">
                      <i class="fas fa-search"></i>
                      </span>
                    </div>
                  </div>
                </div>
                </div>
                <br />
                <br />
              </>
            );
          }
        }
    </code>
    </pre>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）