Array.map() 如何与 React 组件一起工作？

Question

我是新手，我正在做一个学校项目。在其中，我使用Array.map方法在 DOM 中呈现我的组件。它工作正常，但我map()对数组上的方法有点困惑。当我学习 Javascript 时，我使用 Array.map并将一个新的数组从map()方法存储到一个变量中。例如const newArray = Array.map(e => e*2)。所以从 MDN 文档中，我知道 map 返回一个新数组。所以现在在反应中我看到了一些例子，他们没有将Array.map结果存储在一个新变量中，那么在映射旧数组后，这个新数组在哪里存在，它被修改了，他们只是使用Array.map(e => e*2)不将返回的新数组存储在任何变量中？对于下面的示例，它们在映射之后将返回的新数组存储在哪里incompleteTodos。

那么，我在 Array.map 方法中遗漏了什么吗？PS下面的代码工作正常。

const incompleteTodos = this.state.todos.filter(todo => !todo.completed);

<div className="todos">

          {incompleteTodos.length > 0 && <h2 className="incomplete">Incomplete</h2> }

          {

            incompleteTodos.map(todo => (

              <Todo key={todo.id} removeTodo={this.removeTodo} completeTodo={this.completeTodo} todo={todo}/>

            ))

          }

Answer 1

自动打印变量是render()在 JSX 中的函数内部编程的。这是 ReactJS 的特殊之处，它避免创建过多的变量供使用。所以如果你有这样的代码：render() {&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; <h1>{1+1}</h1>{// It will print '2' on the browser}&nbsp; &nbsp; );}但是Array.map()用作变量的方式仍然不错且可以接受，但是您上面显示的代码似乎更适合使用 react 代码，所以不用担心。