为什么 forEach 和 map 在 jsx 中表现不同？

Question

这是我第一次剪辑

export default class Form extends Component {

  renderResult(result) {
    return (
      <span key={result.id}>{result.id}</span>
    )
  }


  render() {
    const { entity, results } = this.props.response;

    return (
      <div key="result" className="row">
        {results.map(
          (result) => this.renderResult(result)
          )}
      </div>
    );
  }

如我所料。在我的输出中，我可以看到生成了一些 <span/>。

由于我需要根据 result 在数组中的顺序显示不同的结果，我想将一个索引变量传递给渲染函数。我试着切换到 forEach

export default class Form extends Component {

  renderResult(idx, result) {
    // if idx then do this else ...
    return (
      <span key={result.id}>{result.id}</span>
    )
  }


  render() {
    const { entity, results } = this.props.response;

    return (
      <div key="result" className="row">
        {results.forEach(
          (response, idx) => this.renderResult(idx, response)
          )}
      </div>
    );
  }

然而，在此版本中，它无法输出任何 span 元素。

为什么不同？

Answer 1

.forEach 有一个 return 类型的 undefined。由回调编辑的值 return 被简单地丢弃。

.map 有一个 return 类型的 Array。由回调 return 编辑的值被收集到一个数组中。

如果 .forEach 是在 .forEach 将索引作为参数但 .map 不作为参数的错误假设下映射的，那么您似乎在尝试使用它，这是不正确的。两者都采用 function(item, index, items){.

形式的回调

为什么 forEach 和 map 在 jsx 中表现不同？

Why forEach and map behave differently in jsx?

javascript

react-jsx