Реагировать на обновление только последнего элемента в списке при рендеринге асинхронного компонента - PullRequest
Новая
       65

Реагировать на обновление только последнего элемента в списке при рендеринге асинхронного компонента

0 голосов
/ 29 мая 2020

Я использую React Native Hooks и в списке компонентов, если загрузка изображений асинхронная, все команды useState отправляются последнему компоненту в списке. Например:

Изображение У меня есть компонент App, и в нем есть список userList , который отображает компонент CardUser. 

    const App = () => {
        ...
        return (
        <FlatList
              listKey={(item, index) => 'user_' + index.toString()}
              data={userList}
              renderItem={({item, index}) => {
                return (
                  <CardUser numkey={index} item={item} navigation={props.navigation} />
                );
              }}
            />)
    }

Пользователь карты, у которого я пробовал много возможностей: 

const CardUser = ({item, navigation, numkey}) => {
 [image, setImage] = useState(
    <View style={style.loadingPic}>
      <ActivityIndicator size="small" color="white" />
    </View>,
  );
useEffect(() => {
    const phone = item.ddd + item.celular;

    fetch(Environment.URL_S3 + phone)
      .then(res => {
        console.log('numkey', numkey);
        setLoadingPic(false);
        if (res.status == 404) {
          setImage(
            <Image
              style={style.img}
              source={require('assets/images/chat_user.png')}
            />,
          );
        } else {
          console.log('Environment.URL_S3 + phone', Environment.URL_S3 + phone);
          setImage(
            <Image
              style={style.img}
              source={{uri: `${Environment.URL_S3 + phone}`}}
              onLoad={response => {
                console.log('LOADED', response);
              }}
            />,
          );
        }
      })
      .catch(_err => {
        setLoadingPic(false);
        setImage(
          <Image
            style={style.img}
            source={require('assets/images/chat_user.png')}
          />,
        );
      });
  }, []);
return (
    <View key={numkey} style={style.touchableUserList}>
      <View style={style.viewTop}>
        <View style={style.marginRight10}>{view}</View>
      </View>
      ...
   </View>
}

Итак, в основном, в этой первой попытке я проверяю, существует ли URL-адрес изображения, если да, я визуализирую одно изображение, если нет, я визуализирую локальное изображение. 

Another thing I've tried was use the methods **onLoad** and **onError** to manipulate the visualization.
...
 <View style={style.marginRight10}>
          {loadingPic && (
            <View style={style.loadingPic}>
              <ActivityIndicator size="small" color="white" />
            </View>
          )}
          {testePic && (
            <Image
              style={style.img}
              source={require('assets/images/chat_user.png')}
            />
          )}
          <Image
            key={numkey}
            style={style.img}
            source={{uri: `${Environment.URL_S3 + item.ddd + item.celular}`}}
            onLoad={response => {
              setLoadingPic(false);
            }}
            onError={() => {
              console.log('ERROR' + numkey);
              setTestePic(true);
            }}
          />
...

Во всех случаях у меня есть журналы и вызываются все методы, они могут идентифицировать правильный номер компонента, но он просто обновляет последний элемент списка, что бы я ни делал.

Кто-нибудь, пожалуйста, помогите мне?

...