JS减少问题

Question

我在react组件中有以下方法：

  addWidget = (index) => {
    let endX = this.state.widgets.reduce((endX, w) => endX.w + w.w, 0)

    console.log(endX);

    if (endX === 12) endX = 0

    this.setState({
      widgets: this.state.widgets.concat({
        ...this.state.availableWidgets[index],
        i: uuid(),
        x: endX,
        y: Infinity,
      })
    })
  }

＆＃34; addWidget＆＃34;在render方法中如下：

  render() {
    const { widgets } = this.state

    return (
      <div>
        <Button type="secondary" onClick={() => this.addWidget(0)}>Add small</Button>
        <Button type="secondary" onClick={() => this.addWidget(1)}>Add large</Button>
        <Dashboard 
          widgets={widgets} 
          onLayoutChange={this.onLayoutChange} 
          renderWidget={this.renderWidget} />
      </div>
    )

我的状态如下：

...

  state = {
    widgets: [],
    availableWidgets: [
      {
        type: 'compliance-stats',
        config: {

        },
        w: 1,
        h: 1,
      },
      {
        type: 'compliance-stats',
        config: {

        },
        w: 3,
        h: 2,
      }
    ]
  }
...

开始宽度，＆＃34; this.state.widgets＆＃34;是一个空数组，使用concat方法在单击时填充。 endX的第一个值为0;然后我得到NaN

Answer 1

您要将accumulator的初始值设为0 但你把它视为一个对象：

endX.w + w.w

就像在做：

0.w + w.w

实际上会这样做：

undefined + w.w

这将产生NaN。

尝试将其更改为：

let endX = this.state.widgets.reduce((endX, w) => endX + w.w, 0)

Answer 2

您的起始值为0但您引用的endX.w未定义，因此添加将生成NaN。

让起始值为{w:0}