Question

我从本地示例构建了以下JS Bin：https://jsbin.com/xocopal/edit?html,console,output

然而，在我的localhost中，图表确实显示，但JS Bin上没有任何内容。这是完整的代码，我不知道问题的来源：

<script type="text/babel">

        const { combineReducers, createStore } = Redux;
        const { Provider, connect } = ReactRedux;
        const { Component } = React; 
        const { render } = ReactDOM;
        const { scaleLinear } = d3;
        const { select } = d3;
        const { line } = d3;
        const { shape } = d3;
        const { axisBottom, axisLeft } = d3;


        //========================Data

                      var all = [
                        {x: 'a', y: 20}, 
                        {x: 'b', y: 14}, 
                        {x: 'c', y: 12}, 
                        {x: 'd', y: 19}, 
                        {x: 'e', y: 18}, 
                        {x: 'f', y: 15}, 
                        {x: 'g', y: 10}, 
                        {x: 'h', y: 14}
                      ];

                     var filtered = [
                        {x: 'a', y: 9}, 
                        {x: 'b', y: 5}, 
                        {x: 'c', y: 6}, 
                        {x: 'd', y: 12}, 
                        {x: 'e', y: 10}, 
                      ];


        //========================Reducers

             const ChartData = (state = all, action) => {
                switch (action.type) {
                  case 'DATA_CHART_ALL':
                    return { all: update(state.all, {$set: all})}
                  case 'DATA_CHART_FILTER':
                      return { all: update(state.filtered, {$set: filtered})}
                  default:
                    return state;
                }
              };



             const todoApp = combineReducers({ChartData});

        //=====================Components

                 class Rect extends React.Component {
                      constructor(props) {
                        super(props);
                      }
                      render() {
                          return (
                            <rect className="bar"
                                  height={this.props.height} 
                                  y={this.props.y} 
                                  width={this.props.width}
                                  x={this.props.x}
                            >
                            </rect>
                          );
                      }
                  };
                  Rect.defaultProps = { 
                          width: 0,
                          height: 0,
                          x: 0,
                          y: 0 
                  }

                  class Bar extends React.Component {
                      constructor(props) {
                        super(props);
                      }
                      render() {
                      var props = this.props;
                      var data = props.data.map(function(d) {
                        return d.y;
                      });

                      var yScale = d3.scaleLinear()
                        .domain([0, d3.max(data)])
                        .range([0, this.props.height]);

                      var xScale = d3.scaleOrdinal()
                        .domain(d3.range(this.props.data.length))
                        .range([0, this.props.width], 0.05);

                      var bars = data.map(function(point, i) {
                        var height = yScale(point),
                            y = props.height - height,
                            width = xScale.rangeBand(),
                            x = xScale(i);

                        return (
                          <Rect height={height} 
                                width={width} 
                                x={x} 
                                y={y} 
                                key={i} />
                        )
                      });

                      return (
                            <g>{bars}</g>
                      );
                    }
                  }; 

                  class Chart extends React.Component {
                      constructor(props) {
                        super(props);
                      }
                      render() {
                          return (
                              <svg width={this.props.width} 
                                   height={this.props.height} >
                                {this.props.children}
                              </svg>
                          );
                      }
                  };

                  class Axis extends React.Component {
                      constructor(props) {
                        super(props);
                      }
                      render() {
                      return <g></g>
                    }
                  };

                  var all = [];


                  class Chartapp extends React.Component {
                      constructor(props) {
                        super(props);
                      }
                      render() {
                          return (
                            <div> 
                            <div>
                              <hr/>
                              <Chart width={this.props.width} 
                                     height={this.props.height}>
                                <Bar data={this.props.datatest} 
                                            width={this.props.width} 
                                            height={this.props.height} />
                              </Chart>
                            </div>
                            </div>
                          );
                      }
                  };
                  Chartapp.defaultProps = { 
                      width: 500,
                      height: 500,
                  }

                      function mapStateToProps(state) {
                return {
                    datatest: state.ChartData
                };
              };

              const mapDispachToProps = (dispatch) => {
                return {
                ChartData: () => {dispatch (datachartFilter());
                    },
                };
              };

              const AppChart = connect(mapStateToProps,mapDispachToProps)(Chartapp);




        //=====================Action

                function datachartAll() {
                  return {
                    type: DATA_CHART_ALL
                  };
                }

                function datachartFilter() {
                  return {
                    type: DATA_CHART_FILTER
                  };
                }

        //=====================Client.js


         const App = () => (
          <div>
            <AppChart />
          </div>
        );

        const store = createStore(todoApp);

                ReactDOM.render(
          <Provider store={store}>
            <App />
          </Provider>,
          document.getElementById('root')
        );
  </script>

我已经设置了整个Redux / React / d3的东西，但我还没有实现按钮。我只是用控制台手动调度动作。

Answer 1

大约一半时间你正在设置你绑定到你所在州的var all = []，有效地改变了状态。解决这个问题只是揭示了其他问题。

我可以建议稍微清理一下代码，使缩进正确，并将其放在JS窗格中，以便获得语法高亮显示。删除问题“下游”的部分（例如，如果您的状态是空数组，则页面上不需要 7 其他组件）。获取一些工作，然后添加一个组件，然后添加另一个，等等。

使用较小的代码块，您将获得更好的答案。

图表没有显示在JS Bin React / redux上

1 个答案: