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的顺序不同地显示结果，我想将一个索引变量传递给render函数。我试图切换到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

+2 month的返回类型为.forEach。回调返回的值只是被丢弃。

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

如果Array以错误的假设.forEach将索引作为参数但.forEach没有，这是不正确的，那么您似乎正在尝试使用.map。两者都采用function(item, index, items){形式的回调。

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

1 个答案: