How do I re render the entire React Pivot Table UI component when I change the selection in select tag?

问题

I am new to react js and I am trying to create a pivot table using React Pivot table. I want to be able to select a data set using a select drop down menu and update the state and re render the full table whenever there is a change in the drop down selection just like the jquery example shown here https://pivottable.js.org/examples/rcsvs.html

It works before I make any selections or changes to the Pivot Table. I am able to toggle between the 2 datasets and the state changes in the Pivot table. But when I select a pivot dimension and use the pivot table, after that point, changing the select menu does not help me change the pivot table's state. Please help.

Here's my code.

import React from 'react';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import Plot from 'react-plotly.js';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';


// create Plotly renderers via dependency injection
const PlotlyRenderers = createPlotlyRenderers(Plot);



const data1 = [{'Country':'USA','Sales':45000}, 
{'Country':'USA','Sales':50000},{'Country':'CA','Sales':15000}]

const data2 = [{'Product':'Sofa','Sales':5000},{'Product':'Dinner 
Table','Sales':50000},{'Product':'Chair','Sales':15000}]

const dataDic = {'Region':data1,'Products':data2}



class App extends React.Component {


constructor(props) {
  super(props);
  this.state = {selectedOption: 'Region'};
  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
  this.setState({selectedOption: event.target.value});

}


handleSubmit(event) {
  alert('You have selected ' + this.state.selectedOption);
  event.preventDefault();
}


render() { 


    return <div>
              <select defaultValue="Region" onChange={(e)=>   
 this.handleChange(e)}>
                    <option  value="Region">Region</option>
                    <option value="Products">Products</option>
              </select>
              <br/>
              <br/>

              <PivotTableUI
                  data={dataDic[this.state.selectedOption]}
                  onChange={s => this.setState(s)}

           renderers={Object.assign({},TableRenderers)}//,PlotlyRenderers)}
                  {...this.state}
              />

            </div>;
     }
 }



export default App;

回答1:

Working code sandbox

There were two problems;

s => this.setState(s) in your PivotTable's onChange property. This overrides root state with all the props of your PivotTable. When your page initiated, container's (Grid) state only contains selectedOption:"Region" but after interacting with the PivotTable, container has receives all the props of the PivotTable. Screenshot:
{...this.state} prop in PivotTableUI component, passes all keys as props in container's state including data.(As seen in the screenshot above). And this overrides data property, data={dataDic[this.state.selectedOption]} After this, changes to selectedOption state does not re-render PivotTableUI

Solution

Change s => this.setState(s) with this.setState({ pivotTableUIConfig: s });
Define a pivotTableUIConfig variable which does not include data property. (Used ES7 Object Rest Operator to Omit data property)

// Picking all the properties except "data" const { data, ...pivotTableUIConfig } = this.state.pivotTableUIConfig;
Change {...this.state} with {...pivotTableUIConfig}

回答2:

Encountered the same problem and found a simple fix. The problem is that data prop always gets overwritten by {...state}. Hence we can assign data to state before passing it to PivotTableUI. And the data prop is no longer needed.

const state = {...this.state};
state['data'] = dataDic[this.state.selectedOption];
return (
  <PivotTableUI
      onChange={s => this.setState(s)}
      {...state}
  />
)

来源：https://stackoverflow.com/questions/53052453/how-do-i-re-render-the-entire-react-pivot-table-ui-component-when-i-change-the-s

标签

javascript

reactjs

react-table

pivottable.js