当我更改选择标签中的选择时，如何重新呈现整个 React Pivot Table UI 组件？

Question

我是 React js 新手，我正在尝试使用 React Pivot 表创建一个数据透视表。我希望能够使用选择下拉菜单选择数据集并更新状态并在下拉选择发生变化时重新呈现完整表，就像此处显示的 jquery 示例https://pivottable.js.org/examples/rcsvs.html

在我对数据透视表进行任何选择或更改之前，它会起作用。我能够在 2 个数据集和数据透视表中的状态更改之间切换。但是当我选择一个数据透视表并使用数据透视表时，在那之后，更改选择菜单并不能帮助我更改数据透视表的状态。请帮忙。

这是我的代码。

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;

Answer 1

我发现如果我从s中删除数据属性

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

这不会覆盖父类中的数据，会自动用更新的数据渲染

Answer 2

Working code sandbox

有两个问题；

1. s => this.setState(s) 在数据透视表的 onChange 属性中。 这将使用数据透视表的所有道具覆盖根状态。 当您的页面启动时，容器的（Grid）状态仅包含selectedOption:"Region"，但在与数据透视表交互后，容器已接收到数据透视表的所有道具。截屏：

2. {...this.state} 组件中的{...this.state} 属性，将所有键作为容器状态中的属性传递，包括data。（如上面的屏幕截图所示）。并且这会覆盖data 属性，data={dataDic[this.state.selectedOption]} 在此之后，更改为selectedOption 状态不会重新渲染PivotTableUI

解决方案

1. 将s => this.setState(s) 更改为this.setState({ pivotTableUIConfig: s });

2. 定义一个不包含数据属性的pivotTableUIConfig 变量。 （使用ES7 Object Rest Operator to Omit数据属性）

   // 选取除“data”之外的所有属性 const { 数据, ...pivotTableUIConfig } = this.state.pivotTableUIConfig;

3. 将{...this.state} 更改为{...pivotTableUIConfig}

Answer 3

遇到了同样的问题，找到了一个简单的解决方法。问题是data prop 总是被{...state} 覆盖。因此，我们可以在将数据传递给PivotTableUI 之前将数据分配给状态。并且不再需要 data 道具。

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

Answer 4

你应该添加

 renderers={{ ...TableRenderers, ...PlotlyRenderers }}
                            {...state}

发送至您的PivotTableUI，查看完整示例：

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

const PlotlyRenderers = createPlotlyRenderers(Plot);


function DataExploration() {

    const { dashboardData: { data } } = useSelector((state) => state.dashboardData)
    
    const ExpComp = (props) => {
        const [state, setState] = useState(props);
        return (
            <div className="row">
                <div className="col-md-12">
                    {
                        <PivotTableUI
                            style={
                                {
                                    width: "100%",
                                    height: "100%"
                                }
                            }
                            onChange={(s) => setState(s)}
                            renderers={{ ...TableRenderers, ...PlotlyRenderers }}
                            {...state}
                        />

                    }
                </div>
            </div>
        )
    }
    return (

        <ExpComp data={data} />
    )
}

From more details check the doc: https://github.com/plotly/react-pivottable