2

我是反应 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;
4

4 回答 4

1

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

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

这不会覆盖父类中的数据，并且会使用更新的数据自动呈现

于 2019-12-23T19:41:26.810 回答
0

工作代码沙箱

有两个问题；

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

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

解决方案

  1. 改变s => this.setState(s)_this.setState({ pivotTableUIConfig: s });

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

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

  3. 改变{...this.state}_{...pivotTableUIConfig}

于 2018-10-30T20:36:10.270 回答
0

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

const state = {...this.state};
state['data'] = dataDic[this.state.selectedOption];
return (
  <PivotTableUI
      onChange={s => this.setState(s)}
      {...state}
  />
)
于 2019-11-27T02:57:16.727 回答
0

你应该添加

 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
于 2021-11-22T13:44:16.177 回答