更新到 useState 后数据未映射 - React

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]