将渲染的项目位置添加到项目数组？

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

找到答案here。

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


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