Question

我已经使用SSR（伺服器端渲染）渲染了React应用。我正在使用react-charts在react组件中显示图表，但这给出了错误说明：

TypeError：破坏非迭代实例的无效尝试

webpack.config.js

const path = require("path");
module.exports = {
  entry: {
    client: "./src/client.js",
    bundle: "./src/bundle.js"
  },
  output: {
    path: path.resolve(__dirname, "assets"),
    filename: "[name].js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["@babel/preset-env", "@babel/preset-react"]
        }
      }
    ]
  },
  resolve: {
    extensions: [".jsx", ".js"]
  }
};

.babelrc：

{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

app.js：

import React, { Component } from "react";
import { Router, Route, Switch } from "react-router-dom";
import Header from "./Header_footer/Header";
import Footer from "./Header_footer/Footer";
import Home from "./Home";

import createMemoryHistory from "history/createMemoryHistory";

const history = createMemoryHistory();

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <React.Fragment>
          <Header />
          <Switch>
            <Route exact path="/" component={Home} />
          </Switch>
          <Footer />
        </React.Fragment>
      </Router>
    );
  }
}

export default App;

我正在编写图表代码的组件：

import React, { Component } from "react";
import Sidebar from "./Sidebar";
import { Chart } from "react-charts";
import axios from "axios";

const qs = require("qs");

class Home extends Component {
state = {
    datelist: [],
    chart_data: [],
    loading: true
};

componentDidMount() {
    this.getDatesList();
}

getDatesList() {
    axios.get("http://127.0.0.1:8001/dateslist/").then(res => {
    if (res.data.result === 1) {
        this.setState({ datelist: res.data.data });
    } else {
        this.setState({ datelist: [] });
    }
    });
}

handleChange = event => {
    var dateval = event.target.value;
    if (dateval === "select") {
    this.setState({ chart_data: [] });
    } else {
    axios
        .post(
        `http://127.0.0.1:8001/pricedata/`,
        qs.stringify({ date: dateval })
        )
        .then(res => {
        if (res.data.result === 1) {
            this.setState({
            chart_data: [
                {
                label: "price1",
                data: res.data.data.map(d => ({ x: d.strike, y: d.price1 }))
                },
                {
                label: "price2",
                data: res.data.data.map(d => ({ x: d.strike, y: d.price2 }))
                }
            ], loading: false
            });
        } else {
            this.setState({ chart_data: [] });
        }
        });
    }
};

render() {
    return (
    <div className="container container_padding">
        <div className="row">
        <Sidebar />
        <div className="col-md-9 col-sm-9 col-xs-12">
            <select
            className="form-control"
            style={{ width: "120px", marginBottom: "10px" }}
            onChange={this.handleChange}
            >
            <option value="select">Select</option>
            {this.state.datelist.map((date, i) => (
                <option value={date} key={i}>
                {date}
                </option>
            ))}
            </select>
            <div
            style={{
                width: "600px",
                height: "300px",
                marginTop: "35px",
                marginLeft: "25px"
            }}
            >
            <Chart
                data={this.state.chart_data}
                series={{ type: "bar" }}
                axes={[
                { primary: true, type: "ordinal", position: "bottom" },
                { type: "linear", position: "left", min: 0 }
                ]}
                primaryCursor
                secondaryCursor
                tooltip
            />
            </div>
        </div>
        </div>
    </div>
    );
}
}

export default Home;

是否存在任何配置问题？

如果我从组件中删除<Charts>，一切正常。这里缺少什么？ .babelrc和webpack.config.js有什么问题吗？

更新：完全错误堆栈跟踪：

TypeError: Invalid attempt to destructure non-iterable instance
    at /usr/projects/myproject/node_modules/react-charts/dist/index.js:138:13
    at ChartInner (/usr/projects/myproject/node_modules/react-charts/dist/index.js:4547:22)
    at HookComponent.render (/usr/projects/myproject/node_modules/react-charts/dist/index.js:339:19)
    at processChild (/usr/projects/myproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:2863:18)
    at resolve (/usr/projects/myproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:2716:5)
    at ReactDOMServerRenderer.render (/usr/projects/myproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:3100:22)
    at ReactDOMServerRenderer.read (/usr/projects/myproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:3059:29)
    at renderToString (/usr/projects/myproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:3526:27)
    at render (/usr/projects/myproject/views/server.js:18:44)
    at app.get (/usr/projects/myproject/index.js:28:39)

感谢您的帮助。

谢谢。

Answer 1

我已经解决了我的问题，我是在这里发帖，以防万一其他人也遇到类似问题。

我一直保持loading状态，并且仅在从API中获取数据时才加载<Chart>标签，例如：

  {this.state.loading ? (
          ""
        ) : (
          <div
            style={{
              width: "600px",
              height: "300px",
              marginTop: "35px",
              marginLeft: "25px"
            }}
          >
            <Chart
              data={this.state.chart_data}
              series={{ type: "bar" }}
              axes={[
                { primary: true, type: "ordinal", position: "bottom" },
                { type: "linear", position: "left", min: 0 }
              ]}
              primaryCursor
              secondaryCursor
              tooltip
            />
          </div>
        )}

TypeError：使用react-charts时无效尝试破坏不可迭代的实例

1 个答案: