Question

我使用useEffect触发一个名为callCards的函数。

这会发出api请求并检索数据。

我可以看到api请求检索了数据，甚至可以看到changeCards更改了fetchedCards的数据，但是，返回的数据不会与新数据重新映射。

我知道当时有新数据，因为我可以在地图上方控制台显示日志，并看到它在那里。

无论出于何种原因，一旦更改了fetchedCards的状态，数据似乎都不想重新映射。

但是，当用户滚动到页面底部时，我也会使用onScroll这个功能。

发生这种情况时，将调用该函数，以正确呈现，映射和显示数据。

PlayerPage = (props) => {
    const [fetchedCards, changeCards] = useState([])
    const [currentUser, updateUser] = useState('')
    const [skip, setSkip] = useState(0)
    const [load, setLoad] = useState(false)


    callCards = (passedSkip) => {

            let requestParams =
                props.player ?
                `players=${props.player}&startDate=2019-03-20T03:10:43.990Z&sort=createdAt`:
                props.team ?
                `team=${props.team}&startDate=2019-03-20T03:10:43.990Z&sort=createdAt` :
                props.league ?
                `league=${props.league}&startDate=2019-03-20T03:10:43.990Z&sort=createdAt`:
                null

            let finalSkip = skip === 0 ? skip : passedSkip
            console.log(`http://${BASE}:4000/reports?${requestParams}&skip=${finalSkip}`)
            axios.get(`http://${BASE}:4000/reports?${requestParams}&skip=${finalSkip}`)
                .then(response => {


                        let combinedCards = fetchedCards
                        combinedCards.push(...response.data)

                        console.log(combinedCards)
                        changeCards(combinedCards)
                        setLoad(false)

                })

    }

    getMoreCards = (e) => {
        var windowHeight = Dimensions.get('window').height,
            height = e.nativeEvent.contentSize.height,
            offset = e.nativeEvent.contentOffset.y;
        if( windowHeight + offset >= height && load !== true ){
            setLoad(true)
            setSkip(skip + 2)
            callCards(skip + 2)
        }
    }


    useEffect(() =>{
        callCards(0)
    }, [])

    return(
        <View>
        {console.log(fetchedCards)}
        <View>
            <Header
                rounded
            >
                <View>
                    <NativeText
                        onPress={() => {
                            Actions.pop()  
                        }}

                        style ={{color: '#006FFF', fontSize: 12, fontFamily: 'Montserrat-Regular'}}
                    >
                        Back
                    </NativeText>
                </View>
                </Header>
                </View>
        <ScrollView
            style={{backgroundColor: 'white', height: '100%'}}
            onScroll={e=> getMoreCards(e)}
            scrollEventThrottle={16}
        >
        <View style={{position: 'relative', paddingTop: '3%', paddingBottom: '35%'}} >
        { 
            fetchedCards !== '' ?
            fetchedCards.map((v,i) => {
                return(
                <View key={i}>
                        <Text
                            style={{color: '#58395C'}}>{v.player.player_name} - </Text>
                </View>
                )
            })
        : null
        }
        </View>
    </ScrollView>
</View>
    )
}

export default PlayerPage

Answer 1

这是因为您要对数组进行变异。

您需要执行以下操作：

let combinedCards = [...fetchedCards]
combinedCards.push(response.data)
console.log(combinedCards)
changeCards(combinedCards)

（或只是这样做）

let combinedCards = [...fetchedCards, response.data]

更新为useState-React

1 个答案: