leecade / leecade/react-native-swiper

Data is not displayed correctly when the data is changed

Open
#1,347 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the supplied Test component with ReactNativeSwiper and updating arr while viewing the second item. Inspect how the swiper handles changed children, then verify that the second item's data and dot index remain aligned after the first item changes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.