Question

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

那么，我在Array.map方法中缺少什么吗？ P.S下面的代码工作正常。

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

打印变量自动在JSX的render()函数中编程，可以工作。这是ReactJS的特殊之处，它避免创建太多变量供使用。因此，如果您有这样的代码：

render() {
    return(
        <h1>{1+1}</h1>{// It will print '2' on the browser}
    );

}

但是使用Array.map()作为变量的方式仍然很不错并且可以接受，但是上面显示的代码似乎可以更好地与React代码一起使用，所以不必担心。

快乐编码！

Answer 2

查看以下示例

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const myTodos = [<div>Hi1</div>,<div>Hi2</div>,<div>Hi3</div>,]
// Created a array to return

class App extends Component {
  render() {
    return (
      <div className="App">
        {myTodos}
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
} 

export default App;

这里是更多参考的链接，reactjs.org/docs/lists-and-keys.html

Answer 3

map方法确实返回了Todo个组件的数组。 React使用此数组来渲染项目。

您发布的代码等效于：

const incompleteTodos = this.state.todos.filter(todo => !todo.completed);
const items = incompleteTodos.map(todo => (
    <Todo key={todo.id} removeTodo={this.removeTodo} completeTodo={this.completeTodo} todo={todo} />
));

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

Array.map（）如何与React组件一起工作？

3 个答案: