reactjs - TypeError:在使用 react-charts 时尝试解构不可迭代的实例无效
问题描述
我已经使用 SSR(服务器端渲染)渲染了一个反应应用程序。我react-charts
用来在反应组件中显示图表,但这给出了错误说明:
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"
]
}
应用程序.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)
任何帮助表示赞赏。
提前致谢。
解决方案
我已经解决了我的问题,我在这里发帖以防其他人也面临类似的问题。
我只在从 API 获取数据时才保持loading
状态并加载标签,例如:<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>
)}
推荐阅读
- python - 使用 Alexa 查询数据库
- python - Pandas - 以指定格式从 Dataframe 中提取数据
- sql - 在两个表中查找重叠日期范围的出现
- javascript - ViewComponent 不允许操作 DOM
- c# - SQL 组合行以便能够过滤
- nlp - 如何定义多类文本数据集(fastai)的日志计数比?
- java - 如何使用 xml 在 java 中解决 StAX 解析问题?
- python - Django上的破碎图像
- pdftron - 使用 PDFTron WebViewer FormBuilder UI 创建的表单字段的 Javascript 触发操作
- json - jq 将对象转换为数组