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>)
}
})
}

Answer 2

您有两个选择。

1. 通过在return teams.map()
返回语句之前显式返回teams.map()在modifyScores()内部的结果
2. 删除... => {teams.map()}周围的花括号，它将返回结果隐式地。

modifyScores() => teams.map();

的语法箭头函数在MDN参考