Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data is not displayed correctly when the data is changed #1347

Open
MOMOTOP-u opened this issue Sep 13, 2022 · 0 comments
Open

Data is not displayed correctly when the data is changed #1347

MOMOTOP-u opened this issue Sep 13, 2022 · 0 comments

Comments

@MOMOTOP-u
Copy link

Which OS ?

Version

Which versions are you using:

  • react-native-swiper v? 1.6.0-rc.2
  • react-native v0.?.? 5.30

Test code:

import { cx, width } from '@config';
import ReactNativeSwiper from 'components/ReactNativeSwiper';
import React, { useRef, useState } from 'react';
import { TouchableOpacity, View } from 'react-native';
import { TYText } from 'tuya-panel-kit';

const Test: React.FC = () => {
  const indexRef = useRef(1);
  const [arr, setArr] = useState([
    { name: 'zzz', age: 18 },
    { name: 'ccc', age: 19 },
  ]);

  const handleFunc = () => {
    indexRef.current = indexRef.current + 1;
    setArr([
      { name: 'zzz', age: indexRef.current + 19 },
      { name: 'ccc', age: 19 },
    ]);
  };
  const renderArr = (item, index) => {
    const { name, age } = item;
    return (
      <View style={{ height: 200, width: 375, backgroundColor: '#000' }} key={index}>
        <TYText size={24} color="#fff">
          {name}
        </TYText>
        <TYText size={24} color="#fff">
          {age}
        </TYText>
      </View>
    );
  };
  return (
    <>
      <View style={{ marginTop: 100, height: 200 }}>
        <ReactNativeSwiper
          height={200}
          dot={
            <View
              style={{
                backgroundColor: 'rgba(255,255,255,.5)',
                width: cx(10),
                height: cx(10),
                borderRadius: cx(5),
                margin: cx(3),
              }}
            />
          }
          activeDot={
            <View
              style={{
                backgroundColor: 'red',
                width: cx(10),
                height: cx(10),
                borderRadius: cx(5),
                margin: cx(3),
              }}
            />
          }
        >
          {arr.map((item, index) => renderArr(item, index))}
        </ReactNativeSwiper>
        <TouchableOpacity style={{ marginTop: 50 }} onPress={() => handleFunc()}>
          <TYText>改变数据啦啦啦啦改变数据啦啦啦啦</TYText>
        </TouchableOpacity>
      </View>
    </>
  );
};

export default Test;

When sliding to the second data, the data of the first data is changed. The Dot index at the bottom of the second data is not switched, but the data is changed to the first data after the switch.
当滑动到第二条数据时,更改第一条数据的数据,第二条数据底部的dot index没有切换,但数据更改成了切换后的第一条数据。

Solution:
解决办法:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant