图表不会在状态更改时呈现答案

【问题标题】：Chart won't render upon state change图表不会在状态更改时呈现
【发布时间】：2019-03-30 22:16:48
【问题描述】：

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

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

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

更新：所以我从这里的回复中得到了建议，并使组件正常工作。图表现在呈现，但道具类型仍然存在问题。我将进一步调查并阅读 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;

【问题讨论】：

标签： javascript react-native

【解决方案1】：

在这个例子中你不需要状态，所以你可以使用函数组件。

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;

【讨论】：

【解决方案2】：

由于每次更改 props 时都会进行渲染，因此您可以对这部分代码进行注释。

 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;

【讨论】：