Reactjs 函数不返回 JSX

Question

我正在尝试编写一个函数来返回 JSX，但不知何故它不起作用。是否存在任何冲突导致我的函数不返回任何值。我尝试过字符串、列表，但似乎没有任何返回。

我的功能:

const modifyScores = () => {
        teams.map(team => {
            if (team.team_name === activeTeam) {
                let scoresList = []

                Object.entries(team).map(([key, value]) => {
                    if (key.startsWith('r')) {
                        const obj = {"round": parseInt(key.substring(1)), "score": value}
                        scoresList.push(obj)
                    }
                })

                scoresList.sort((a, b) => a.round - b.round)
                
                console.log(scoresList)
                //return <Button>test</Button>
                return scoresList.map(s => <Button>r: {s.round}</Button>)
            }
        })
}

我的 JSX:

{modifyScores()}

Answer 1

您应该在modifyScores()内执行return。

const modifyScores = () => {
    return teams.map(team => {
            if (team.team_name === activeTeam) {
                let scoresList = []

                Object.entries(team).map(([key, value]) => {
                    if (key.startsWith('r')) {
                        const obj = {"round": parseInt(key.substring(1)), "score": value}
                        scoresList.push(obj)
                    }
                })

                scoresList.sort((a, b) => a.round - b.round)
                
                console.log(scoresList)
                //return <Button>test</Button>
                return scoresList.map(s => <Button>r: {s.round}</Button>)
            }
        })
}