Question

我在状态对象中填充了一个数组，名为plateHistory。

一旦填充了数组，我就希望我的UI能够使用我期望的数据进行更新。但是，下面的代码并没有给我预期的结果。

console.log按预期记录行，但<span>永远不会呈现。我试图通过数组进行映射，因为console.log正在记录 - 但是为什么<span>从不渲染？我想我正在犯一个基本的错误，但似乎无法发现它。

请注意，行this.state.plateHistory.length从'Nope'变为正确的长度。这样就可以了，状态对象正在更新。

<p>Recently printed plates</p>
                <p>{this.state.plateHistory.length > 0 ? this.state.plateHistory[0].id : 'Nope'}</p>
                    {this.state.plateHistory.map((item, i) => {
                        <div>
                            <span>{item.id}</span>
                            <div className="col-lg-6 text-center" style={divStyle}>
                                <span>{item.id}</span>
                                {console.log(item.id)}
                            </div>
                        </div>
                        })
                    }

Answer 1

正如哈桑所说;传递给地图的功能没有返回。

如果使用带括号的箭头功能，则需要使用return语句：

x=>{return x+1}

如果你不使用括号而不是你得到一个语句，那么该语句的结果就是函数的返回值：

x=>x+1;

如果要在一个语句中返回一个对象文字，则必须使用括号，以免将对象文字的括号与函数体的括号混淆：

x=>({xValue:x});

在您的情况下，您可以尝试删除括号：

{
  this.state.plateHistory.map((item, i) =>//bracket removed
    <div>
      <span>{item.id}</span>
      <div className="col-lg-6 text-center" style={divStyle}>
        <span>{item.id}</span>
        {console.log(item.id)}
      </div>
    </div>
  /**closing bracket removed */)
}

Array.map日志记录但未在屏幕上显示

1 个答案: