Question

我遇到了React服务器端渲染和Recharts的问题。当我通过道具将数据传递到我的图表，重新加载我的服务器并刷新我的页面时，我收到一个错误：

ReferenceError: document is not defined
at Text.calculateWordWidths (/Users/piRstone/Documents/node/dashboard/node_modules/recharts/lib/component/Text.js:101:26)
at Text.updateWordsByLines (/Users/piRstone/Documents/node/dashboard/node_modules/recharts/lib/component/Text.js:81:43)
at Text.componentWillMount (/Users/piRstone/Documents/node/dashboard/node_modules/recharts/lib/component/Text.js:67:12)
[...]

即使我从图表文件中的const传递静态数据，它仍然无效。

当我在没有服务器端渲染的情况下尝试Recharts时，一切正常但是一旦我设置了SSR，我就收到了这个错误。

我尝试从图表声明中删除data={this.props.data}，以便我的页面正确显示（当然没有图表），但如果重置此页面，我仍然会收到此错误。

我认为这是the issue on Github中所说的一个错误（可能已经解决，但显然没有）

Answer 1

我找到了一个有效的解决方案。我在我的项目中使用Redux，所以我使用状态返回或不返回我的图表。

render() {
    if (browser) {
        return (
            <div>
                <AreaChart width={630} height={300} data={views.views} margin={{top: 5, right: 30, left: 20, bottom: 5}}>
                    // Code
                </AreaChart>
            </div>
        );
    } else {
        return null;
    }
}

默认情况下，browser状态为false。当组件安装时，我会调度一个动作来改变它的状态：

componentDidMount() {
    const {dispatch} = this.props;
    if (typeof(document) != "undefined") {
        dispatch(setOnBrowser(true))
    }
}

由于服务器已经通过道具发送了数据，因此该组件只需要重新渲染，它对我有用。

React Recharts - ReferenceError：未定义文档

1 个答案: