时间戳

首页 > 解决方案 > 图表不会在状态更改时呈现

javascript - 图表不会在状态更改时呈现

问题描述

我正在测试 react-native 并且我正在尝试制作一个简单的 lineChart 来重绘道具更改。我有一个父组件 HomeScreen，它将整数数组作为道具传递给 LineChart 子组件。但是，永远不会绘制 LineChart。

我试过传入一个已经初始化的带有虚拟值的数组。lineChart 子组件随后将呈现，但不会在后续状态更改时重新呈现。

我已经检查了 react-devtools 中 state 和 props 的实际值，并且子组件确实收到了 props 并且状态已更新。如何让图表呈现我传递的道具？

更新：所以我从这里的回复中得到了建议，并使组件正常工作。图表现在呈现，但道具类型仍然存在问题。我将进一步调查并阅读 react-native-svg 文档。谢谢！

    enter code here
import React from 'react';
import { View } from 'react-native';
import { LineChart, Grid } from 'react-native-svg-charts'

const BeatChart = ({ data }) => (
      <LineChart
        style={{ height: 200 }}
        data={data}
        svg={{ stroke: 'rgb(0, 255, 255)' }}
        contentInset={{ top: 20, bottom: 20 }}
      >
        <Grid />
      </LineChart>
); 


export default BeatChart;

标签： javascriptreact-native

解决方案

由于渲染发生在道具的每次更改上，您可以注释这部分代码。

 static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.data !== prevState.data) {
      return { data: nextProps.data };
    }
    return null;
  }

即使您想实现它，如果需要，请使用componentWillmount 。

否则代码工作正常。

所以你的最终代码就像：

import React from 'react';
import { View } from 'react-native';
import { LineChart, Grid } from 'react-native-svg-charts'

class BeatChart extends React.PureComponent {

  constructor(props) {
    super(props)

    this.state = {
      data: [],//your data
    }

  };

  // static getDerivedStateFromProps(nextProps, prevState) {
  //   if (nextProps.data != prevState.data) {
  //     return { this.setState({data: nextProps.data}) };
  //   }
  //   return null;
  // }



  render() {

    const arr = this.state.data;


    return (
      <LineChart
        style={{ height: 200 }}
        data={arr}
        svg={{ stroke: 'rgb(0, 255, 255)' }}
        contentInset={{ top: 20, bottom: 20 }}
      >
        <Grid />
      </LineChart>
    )
  }

}

export default BeatChart;

推荐阅读