react-native-oh-library / react-native-harmony-svg

SVG library for React Native OpenHarmony.
MIT License
6 stars 29 forks source link

切换数据后,Line组件老数据还会显示在屏幕上。 #216

Closed xuxiaoqian1 closed 5 months ago

xuxiaoqian1 commented 5 months ago

问题复现demo

import React, { useState } from 'react';
import { StyleSheet, View, Text, ScrollView, Button } from 'react-native';
import { Svg, G, Line } from 'react-native-svg';

const SvgChartGrid = () => {
  const data = [[285, 232, 179, 126, 72.99999999999999, 20], [37.666666666666664, 72.99999999999999, 108.33333333333334, 143.66666666666666, 214.33333333333337, 249.66666666666666, 285]]
  let index = 0
  const [dataY, setDataY] = useState(data[0])
  return (
    <ScrollView>
      <View style={{ display: 'flex', height: 500, paddingTop: 50 }}>
      <View>
          <Text>正常Text</Text>
          {dataY.map((value, index) => {
            return (
              <Text key={value + index}>
                {value}
              </Text>
            )
          })}
        </View>
        <View>
          <Svg>
            <G>
              {dataY.map((value, index) => {
                return (
                  <Line
                    key={index}
                    y1={'0%'}
                    y2={'100%'}
                    x1={value}
                    x2={value}
                    strokeWidth={1}
                    stroke={'rgba(0,0,0,0.2)'}
                  />
                )
              })}
            </G>
          </Svg>

        </View>

      </View>
      <View style={{display:'flex', flexDirection: 'row',gap:'20px',magrinTop: 200}}>
        <Button style={{flex:1}} title="data[0]" onPress={() => {
          setDataY(data[0])
        }}>切换data[0]</Button>
        <Button style={{flex:1}} title="data[1]" onPress={() => {
          setDataY(data[1])
        }}>切换data[1]</Button>
      </View>
    </ScrollView >
  )
}

export default SvgChartGrid;
Louis-C7 commented 5 months ago

fix in PR#208