期望赋值或函数调用，如果 map 语句中不存在返回，则在 react 中看到表达式错误，为什么?

Question

import React, { Component } from 'react'
export default class DisplayTodo extends Component {
state = {
todo:["eat", "sleep", "repet"]
}
render() {
return (
<div>
{
this.state.todo.map((value)=>{
<p>{value}</p>
})
}
</div>
)
}
}

1(我知道如果我在地图中保留返回，它可以工作，但我想知道为什么它失败了

2(此外，我参考了 React 的链接

https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx

现在，错误看起来与解释相反，说明预期赋值或函数调用，而是看到一个表达式

3(在上面的反应链接解释中说您可以将任何有效的JavaScript表达式放在大括号内

4(此外，在javascript中我们可以这样写为什么在React中是不可能的

var a = [11,33,99]
a.map((val)=>{
console.log(val*2)
})

Answer 1

所以在你的代码中

export default class DisplayTodo extends Component {
state = {
todo:["eat", "sleep", "repet"]
}
render() {
return (
<div>
{ <-- outer expression start
this.state.todo.map((value)=>{
<p>{value}</p>  <-- inner expression
})
} <-- outer expression end
</div>
)
}
}

你有一个外部表达式，它包装你的JS代码，它是完全正确的。您的内部表达式也很好，因为您在 JSX 元素内部对 JS 代码使用了大括号。但是，为了让 React 从 todo 数组渲染值，你必须从 map 回调返回每个元素，如下所示：

export default class DisplayTodo extends Component {
state = {
todo:["eat", "sleep", "repet"]
}
render() {
return (
<div>
{
this.state.todo.map((value)=>{
return <p key={value}>{value}</p>
})
}
</div>
)
}
}

或者你可以做：

{
this.state.todo.map(value => <p key={value}>{value}</p>)
}

注意：我还为数组中的每个待办事项添加了 React 键，因此您具有某种唯一性(关于 React 键的良好解释(

希望对:)有所帮助

Answer 2

大括号"{}"需要返回语句。如果您不想添加 return 语句，只需使用 "((" 或什么都不用。例如(

this.state.todo.map((value)=>
<p>{value}</p>
)