Question

我正在尝试使用JavaScript map（）函数遍历todos数组。我想为每个项目返回一个Dropdown.Item元素。当我单击Dropdown.Toggle时，一个空列表会展开。 Dropdown.Item和Dropdown.Toggle是React引导程序组件。

此处的代码：https://stackblitz.com/edit/react-egxxcl

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [{name: 'A', value: 10}, {name: 'B', value:20}]
    };
  }

  render() {
    return (
      <div>
       <Dropdown>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Change
        </Dropdown.Toggle>

        <Dropdown.Menu >
          {this.state.todos.map((todo, index) => {
            <Dropdown.Item value={todo.value}>{todo.name}</Dropdown.Item>
          })}
        </Dropdown.Menu>
      </Dropdown>
      </div>
    );
  }
}

Answer 1

您不会从map函数返回任何内容，可以将其包装在括号中，也可以避免使用return关键字，也不要忘记key道具。

我强烈建议您使用linter来帮助您捕获那些小错误

您还可以使用({})

从地图回调函数中解构值和名称。

({ propName })

<Dropdown.Menu>
  {this.state.todos.map(({ name, value }) => (
    <Dropdown.Item key={name} value={value}>{name}</Dropdown.Item>
  ))}
</Dropdown.Menu>

Answer 2

您刚刚错过了return函数中的map。

{this.state.todos.map((todo, index) => {
     return <Dropdown.Item value={todo.value}>{todo.name}</Dropdown.Item>
})}

或缩短

{this.state.todos.map((todo, index) => (
   <Dropdown.Item value={todo.value}>{todo.name}</Dropdown.Item>
))}

甚至缩短

{this.state.todos.map((todo, index) => <Dropdown.Item value={todo.value}>{todo.name}</Dropdown.Item>
)}

遍历数组并为每个项目返回一个`Dropdown.Item`元素

2 个答案: