将呈现的项目位置添加到项目数组

Question

我想在渲染时添加每个对象的位置坐标，以便我可以将其指定为放置区。

我可以将一条数据放入objLocation，但显然，随着每个SubComponent的渲染，它会不断覆盖。构建该对象位置数组的正确方法是什么？

const data = [
  { id: 1 },
  { id: 2 },
  { id: 3 },
]

export default class Viewport extends Component {
    this.state = {
      objLocation = [],
    }
    render() {
      return (
        {data.map( d => {
          return(
            <SubComponent onLayout={this.getLayout} id={d.id} />
          )
        })}
      )
    }

    getLayout = (e) => (
      const obj = { 
        width: e.nativeEvent.layout.width,
        height: e.nativeEvent.layout.height,
        x: e.nativeEvent.layout.x,
        y: e.nativeEvent.layout.y,
      }
      this.setState({
        objLocation: obj
      });
    }
}

Answer 1

在这里找到了答案。

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])
})

ES6 With Spread operator.
this.setState({
  arrayvar: [...this.state.arrayvar, newelement]
})