反應本機 Web 套接字

Question

我在我的帶有redux 的本機應用程序中使用網絡套接字，我成功地從服務器中提取了數據，但是 Flatlist 組件有問題，它多次顯示每個組件的數據，例如，如果我有 32 個硬幣，它正在顯示每個硬幣中的 32 個硬幣數據並繼續這樣做，這里有人可以幫助我解決這個問題嗎？？？

這是我的平面列表：

 <FlatList style={{ flexGrow: 0, height: 130, }} refreshing={true} keyExtractor={item => { for (let i = 0; i <= item.length; i++) { return `trending${i}` } }} contentContainerStyle={{ marginTop: SIZES.base }} data={data} renderItem={({ item }) => { return ( <Trending price={socketReducer.price} id={userData.id} market={market} name2={item.name} min={item.min_amount} name={item.stock} symbol={item.money} /> ) }} horizontal showsHorizontalScrollIndicator={false} />

這是我的組件：

import { useNavigation } from '@react-navigation/core'
import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native'
import { connect } from 'react-redux'
import { COLORS, SIZES } from '../../constants'
import { fetchSocket } from '../../storesWebsocket/socketActions'

const Trending = ({ setSocketData, market, name, name2, symbol, price, percentageChange, appTheme, id, userData, assetID, baseID }) => {
    const navigation = useNavigation();
    React.useEffect(() => {
        let isMounted = true
        if (isMounted) {

            setSocketData(name2)
        }

        return () => { isMounted = false }
    })


   



    return (
        <TouchableOpacity
            style={{
                width: 150,
                height: 120,
                marginLeft: 10,
                borderRadius: 15,
                backgroundColor: appTheme.market
            }}
            onPress={() => navigation.navigate("ArsinexExchange", {
                AssetID: assetID,
                BaseID: baseID,
                CoinID: id,
                Token: userData
            })}
        >
            <View style={{ marginLeft: 20, marginTop: 20 }}>
                <View style={{ flexDirection: 'row' }}>
                    <Image style={{ height: 30, width: 30 }} source={{ uri: `https://arsinex.s3.eu-central-1.amazonaws.com/assets/images/coins/${name.toLowerCase()}.png` }} />
                    <View style={{ marginLeft: 10 }}>
                        <Text style={{ fontWeight: 'bold', flexShrink: 1, paddingRight: 50, color: appTheme.textColor }}>{name}</Text>
                        <Text style={{ color: COLORS.lightGray, fontSize: 9 }}>{symbol}</Text>
                    </View>
                </View>
                <View style={{ marginTop: "15%" }}>
                    <Text style={{ fontWeight: 'bold', fontSize: 12, color: appTheme.textColor }}>{price}</Text>
                    <Text style={{ fontSize: 11, marginTop: 5, color: percentageChange > 0 ? COLORS.green : COLORS.red }}>{parseFloat(percentageChange).toFixed(2)}%</Text>
                </View>
            </View>

        </TouchableOpacity>
    )
}


function mapStateToProps(state) {
    return {
        socketData : state.mySocket,
        appTheme: state.themeReducer.appTheme,
        error: state.themeReducer.error
    }
}


function mapDispatchToProps(dispatch) {
    return {
        setSocketData : (socket) => {dispatch(fetchSocket(socket))} 
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Trending)


 import * as socketActions from './socketActions'


const initialState = {
    mySocket: [],
    loading: false,
    error: '',
}

const socketReducer = (state = initialState, action) => {
    switch (action.type) {
        case socketActions.FETCH_SOCKET_BEGIN:
            return {
                ...state,
                loading: true,
            }
        case socketActions.FETCH_SOCKET_SUCESS:
            let priceLists = []
            priceLists.push(action.payload.price)
            

            //find in two dimentioanl array
            
            
            if(action.payload.market == action.payload.socket){
                return {
                    loading:false,
                    mySocket: {
                        price : action.payload.price,
                        market : action.payload.market,
                    },
                    error: '',
                }
            }
            return {
                loading:false,
                mySocket: {
                    
                
                },
                error: '',
            }
            
        case socketActions.FETCH_SOCKET_FAILURE:
            return {
                error: action.payload,
            }
        default:
            return state
    }
}

export default socketReducer

Answer 1

useEffect 沒有條件，因此它的函數會為每個項目觸發。

嘗試這樣使用：它發出一次請求。

    React.useEffect(() => {
        let isMounted = true
        if (isMounted) {

            setSocketData(name2)
        }

        return () => { isMounted = false }
    }, []);

如果您不想在某些狀態更改時發出新請求，請嘗試以下操作：

    const [myState, setMyState] = useState("some value");
    
    React.useEffect(() => {
        let isMounted = true
        if (isMounted) {

            setSocketData(name2)
        }

        return () => { isMounted = false }
    }, [myState]);