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

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

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

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

我知道新数据存在于该点，因为我可以在地图上方的控制台日志中看到它就在那里

无论出于何种原因，一旦fetchedCards的状态发生更改，数据似乎不希望重新映射

但是，当用户滚动到页面底部时，我也会在Scroll上使用此函数

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

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

PlayerPage=（道具）=>{
常量[fetchedCards，changeCards]=useState（[]）
const[currentUser，updateUser]=useState（“”）
常量[跳过，设置跳过]=使用状态（0）
const[load，setLoad]=useState（false）
电话卡=（passedSkip）=>{
让请求参数=
道具，玩家？
`players=${props.player}&startDate=2019-03-20T03:10:43.990Z&sort=createdAt`:
道具队？
`team=${props.team}&startDate=2019-03-20T03:10:43.990Z&sort=createdAt`:
联盟的道具？
`league=${props.league}&startDate=2019-03-20T03:10:43.990Z&sort=createdAt`:
无效的
让finalSkip=skip==0？skip:passedSkip
log（`http://${BASE}:4000/reports？${requestParams}&skip=${finalSkip}`）
get（`http://${BASE}:4000/reports？${requestParams}&skip=${finalSkip}`）
。然后（响应=>{
让combinedCards=fetchedCards
组合卡。推送（…响应。数据）
控制台日志（组合卡）
更换卡（组合卡）
设置加载（错误）
})
}
getMoreCards=（e）=>{
var windowHeight=尺寸。获取（'window'）。高度，
高度=e.nativeEvent.contentSize.height，
offset=e.nativeEvent.contentOffset.y；
如果（窗口高度+偏移量>=高度和负载！==真）{
设置加载（真）
设置基普（跳过+2）
电话卡（跳过+2）
}
}
useffect（（）=>{
电话卡（0）
}, [])
返回(
{console.log（fetchedCards）}
{
Actions.pop（）
}}
样式={{color:'#006FFF'，字体大小：12，字体系列：'Montserrat Regular'}
>
返回
getMoreCards（e）}
scrollEventThrottle={16}
>
{ 
获取的卡片！=''？
获取的卡片。映射（（v，i）=>{
返回(
{v.player.player_name}
)
})
：null
}
)
}
导出默认播放页面

这是因为您正在对数组进行变异

您需要这样做：

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

（或者干脆去做）

---

您可以为此创建一个代码笔吗？请尝试

changeCards（latest=>（[…latest，…response.data]）

而不是从未更新的回迁卡创建组合卡。

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