Question

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

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

我已经检查了react-devtools中state和props的实际值，并且childcomponent确实接收了props并且状态被更新。如何使图表呈现通过的道具？

更新：因此，我从此处的答复中获取了建议，并使组件正常运行。现在可以显示该图表，但是prop类型仍然存在问题。我将进一步调查并阅读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;

Answer 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;

Answer 2

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

 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;

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

2 个答案: