React/TypeScript/SPFx forEach 和复杂对象的映射函数问题

Question

我在使用动态 UI 渲染 React 时遇到问题。

我发现我的一个组件行为不端。

我有一个具有数组属性的对象，我通过 props 获得。

对象类似如下

对象：

{
  title: "title",
  id: 0,
  rTimes: [
  { idH: 0, hours: 2 }, 
  { idH: 1, hours: 3 }, 
  { idH: 2, hours: 1 }]
};

如果我使用 console.log() 记录对象，它会显示正确的输出，但如果我在 hours 数组上使用 forEach 进行迭代，它会变得很奇怪。

this.props.Obj.rTimes.forEach((rt) => {
  console.log(tr.hours);
});

=== Console Output ===

0
0
0

这阻止了我的渲染，因为它在render() 上传递了这些值，因为我正在映射这些值：

render()
{
    return(
           <div>
           {this.props.Obj.hours.map((h) => 
               <rhourComponent hours={h.hours} />
           )}
           </div>
          );
}

所以，我最终得到了 3 个以零为值的组件。

知道为什么会发生这种情况吗？

这是一个 React SPFx 客户端 Webpart。

Answer 1

rTimes 对象可能会在组件渲染后更新。

我会尝试：

1. 通过控制台输出每个数组对象以验证idH是否正在更新；
2. 将forEach封装在setTimeout中；
3. 避免直接在 JSX 中使用组件 props，方法是将它们分配给内部组件变量，而不是映射该数组。

（3）的一个例子：

constructor(props) {
  super(props);
  this.state = {
    hours: this.props.Obj.hours
  };
}

然后在 JSX 上：

<div>
{this.state.hours.map((h) => 
    <rhourComponent hours={h} />
)}
</div>

或者（传递整个数组）：

<div>
    <rhourComponent hours={this.state.hours} />
</div>

然后您可以像这样操作hours：

this.setState(
  update(this.state, {
    hours: [], // any array you want to change to
  }),
);