javascript - Array.map 记录但不显示在屏幕上

Question

我在我的状态对象中填充了一个数组，称为 plateHistory .

填充数组后，我希望我的 UI 会更新为我期望的数据。但是，下面的代码没有给我预期的结果。

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

请注意 this.state.plateHistory.length 行从“不”到正确的长度。所以这是有效的，状态对象正在更新。

<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

正如哈桑所说；您传递给 map 的函数没有返回。

如果你使用带括号的箭头函数，你需要使用 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 */)
}