1

我正在使用recharts，如果data变量在类之外，它可以正常工作。发生的情况是它加载、动画图形并显示“点”坐标。但是，如果data变量在类内部，它不会动画，也不会更新“点”坐标 css。

注意渲染方法中注释掉的数据，如果我取消注释，并注释掉顶部数据变量，它不起作用，但这个当前设置工作得很好。任何修复的想法？我最终想加载this.props.data而不是data一旦修复。

const data = [{ name: '07/14/2017', mood: 6 }, { name: '07/15/2018', mood: 7 }];

class LinearGraph extends Component {

  constructor(props) {
    super(props);

  }

  render() {
    //const data = [{ name: '07/14/2017', mood: 6 }, { name: '07/15/2018', mood: 7 }];

    return (
      <ResponsiveContainer width="100%" height="80%">
        <LineChart
          data={data}
          margin={{ top: 5, right: 50, left: 0, bottom: 5 }}
        >
          <XAxis dataKey="name" />
          <YAxis />
          <CartesianGrid
            strokeDasharray="3 3"
            horizontal={false}
          />
          <Tooltip />
          <Legend />
          <Line
            type="monotone"
            dataKey="mood"
            stroke="rgba(43, 191, 217, 0.9)"
            dot={{ stroke: '#ff0000', strokeWidth: 12 }} // this isn't working at all
            activeDot={{ r: 1 }}
            strokeWidth={5}
          />
          <ReferenceLine y={7} label="Max" stroke="green" strokeDasharray="3 3" />
        </LineChart>
      </ResponsiveContainer>
    );
  }

}

也为了更直观的理解，在这张照片中它是它工作的时候（不能显示动画，但你可以看到“点”坐标正在工作）：

在此处输入图像描述

在这里它不起作用： 在此处输入图像描述

编辑：我也尝试在 componentWillMount （和 componentDidMount 但后者给出警告）中设置状态：

class LinearGraph extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }

  componentWillMount() {
    this.setState({ data: this.props.data });
  }

  render() {
    return (
      <ResponsiveContainer width="100%" height="80%">
        <LineChart data={this.state.data} />
      </ResponsiveContainer>
    );
  }

}
4

2 回答 2

2

render在状态变化时调用。你需要复习一下 react组件的生命周期。最佳实践是声明您的状态，然后将其加载到生命周期componentDidMount函数中。

class LinearGraph extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data = []
        };
    }

    componentDidMount() {
        // Get your data here, from a const or an API
        fetch('api/get_data')
            .then(res => res.json()) // Get the json
            .then(res => this.setState({data: res.data})) // Consume the json
            .catch(err => alert('foo'));
    }

    render() {
        return (
            <div>
                <LineChart data={this.state.data} />
            </div>
            );
    }
}
于 2017-07-19T21:21:30.367 回答
0

哇，所以解决方案是调用componentWillReceiveProps，所以我只是添加了：

componentWillReceiveProps() { this.setState({ data: this.props.data }); }

它现在更新得很好，不需要回调或承诺

于 2017-07-19T22:10:11.557 回答