多次派遣一个动作

Question

我试图从Asyncstorage获取艺术家列表，并将该艺术家分配给状态名称“ GetArtist”（结果是在字符串中UVW“]））。之后，我将其映射并将ID传递给POLUMLIST.JS。在专辑列表中im命名为“ redux-action”“ searchArtistalBum（id）”传递ID并获取该艺术家的所有专辑列表，但是如我所拥有的Console.Log（“ showearchdata ===”，showearchdata，showearchdata），以获取艺术家名称，那里是三位艺术家，所以它应该被称为3次IE Artist1，Artist2，Artist3，但被称为1.Call Artist1，Artist1，Artist1，2.Call Artist2，Artist2，Artist2，Artist2和3.Call Artist3和3.Call Artist3，Artist3，Artist3，Artist3和Atlast Values是同一IE Artist3，Artist3，Artist3。而且，如果我尝试将“ showearchdata”作为useffect（[showearchdata]）中的变量传递到无限的循环中。

home.js

import React, {useEffect, useState} from 'react';
import {View, Text, ScrollView, AsyncStorage} from 'react-native';
import {connect} from 'react-redux';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Label from '../components/Label';
import HomeHeader from '../components/HomeHeader';
import AlbumList from '../components/AlbumList';

export const Home = ({ navigation, mainNavigation}) => {

  const [getArtist, setGetArtist] = useState([])

  useEffect(() => {
    getTokenResult()
  },[])

  const getTokenResult = async () => {
    let getResult = await AsyncStorage.getItem('access_token')
    let getCat = await AsyncStorage.getItem('categories')
    let getArt = await AsyncStorage.getItem('artists')
    setGetArtist(JSON.parse(getArt))

    console.log("getResult ", getResult)
    console.log("getArt ", typeof JSON.parse(getArt), JSON.parse(getArt))
    console.log("getCat ", getCat)
    if (!getResult || !getResult == undefined && !getResult == null){
      mainNavigation.navigate('Login')
    } else if(!getArt || !getArt === undefined && !getArt == null){
      mainNavigation.navigate('Artist')
    } else if(!getCat || !getCat === undefined && !getCat == null){
      mainNavigation.navigate('Category')
    } 
  }



  return (
    <ScrollView
      style={{flex: 1, backgroundColor: 'rgb(30,30,30)', padding: 15}}>
      <HomeHeader />
      <View
        style={{
          display: 'flex',
          flexDirection: 'row',
          flexWrap: 'wrap',
          justifyContent: 'space-between',
        }}>
      </View>
      {
        getArtist && getArtist !== undefined && getArtist.length > 0 ?
        getArtist?.map((item, index) => {
          return (
            <AlbumList id={item && item !== undefined ? item : ""} key={index} />
        )
        })
        :
        null
      }
    </ScrollView>
  );
};

const mapStateToProps = state => ({
  getToken: state.getToken,
});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

poleslist.js

import React, {useEffect} from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  ScrollViewComponent,
} from 'react-native';
import {searchArtistAlbum} from '../redux/actions/searchAction';
import AlbumCard from './AlbumCard';
import {connect} from 'react-redux';

function AlbumList({id, searchArtistAlbum, showSearchData}) {
  const arr = [1, 2, 3, 4, 5];

  useEffect(() => {
    searchArtistAlbum(id);
  }, []);
  console.log('showSearchData === ',showSearchData && showSearchData !== undefined && showSearchData?.items && showSearchData?.items[0]?.artists[0]?.name);
  return (
    <View style={styles.contView}>
      <Text style={styles.textView}>{showSearchData && showSearchData !== undefined && showSearchData?.items !== undefined ? showSearchData?.items[0]?.artists[0]?.name : ""}</Text>
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
        {showSearchData && showSearchData !== undefined
          ? showSearchData?.items?.map((item, index) => {
              return <AlbumCard image={item && item !== undefined ? item?.images[1]?.url : ""} key={index} />;
            })
          : null}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  textView: {
    color: '#fff',
    fontSize: 23,
    fontWeight: '700',
  },
  contView: {
    paddingTop: 20,
    width: '100%',
  },
});

const mapStateToProps = state => ({
  showSearchData: state.showSearchData,
});

const mapDispatchToProps = {searchArtistAlbum};

export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);

polescard.js

import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';

function AlbumCard({image}) {
  return (
    <View style={styles.contView}>
      <Image
        style={styles.img}
        source={{
          uri:image && image !== undefined ? image : 'https://images4.alphacoders.com/476/thumb-350-47698.png',
        }}
      />
      <View style={styles.textView}>
      <Text style={styles.textView1}>AlbumCard</Text>
      <Text style={styles.textView2}>Beast Playlist</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  img: {
    width: 150,
    height: 150,
  },
  contView:{
    paddingVertical: 20,
    marginRight: 20,
  },
  textView:{
      marginVertical: 10
  },
  textView1:{
      fontSize:14,
      fontWeight: '700',
      color:'#fff'
  },
  textView2:{
    fontSize:14,
    color:'rgb(150,150,150)',
    paddingVertical: 3,
}
});

export default AlbumCard;