javascript - 为什么 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 的返回类型为 undefined。回调返回的值将被简单地丢弃。

.map 的返回类型为 Array。回调返回的值被收集到一个数组中。

如果 .forEach 将索引作为参数，但 .map 没有，这是不正确的。两者都采用 function(item, index, items){.

形式的回调。