Question

所以我在这里做了一些阅读，发现大多数人都建议反对修改道具。因此，我想知道是否可以复制道具？

本质上，我想复制道具并将其设置为状态。更具体地说，我正在创建一张桌子，传入的道具之一是headers，它是一个对象数组

headers={[
            {id: "Name" , numeric: false, disablePadding: false, label: "Name"},
            { id: 'Weight', numeric: true, disablePadding: false, label: 'Weight' },
            { id: 'Height', numeric: true, disablePadding: false, label: 'Height' }
}]

我想添加一个默认列s.t。看起来像

headers={[
            {id: "Name" , numeric: false, disablePadding: false, label: "Name"},
            { id: 'Weight', numeric: true, disablePadding: false, label: 'Weight' },
            { id: 'Height', numeric: true, disablePadding: false, label: 'Height' },
            {id: "Modify" , numeric: false, disablePadding: false, label: "Modify"}
              ]}

感谢您的帮助！：-）

Answer 1

在构造函数中执行此操作：

this.state: {fooCopy: this.props.foo};

如果您想将修改后的道具存储在状态中，请在本地变量中创建一个副本（尝试Object.assign或JSON.parse（JSON.stringify（a））），对其进行修改，然后再存储在状态中。 / p>

Answer 2

可以使用一些技巧，而无需使用其他库 1.正确设置初始状态

this.state = { headers: this.props.headers.slice(0) }

修改状态时，请使用回调技术

this.setState（（previousState）=> {
//修改状态并返回一个新状态。
}）;

How to use slice

Using setState properly

Answer 3

数组对象通过引用传递。相反，您可以创建一个新数组，然后将数据转储到状态中。

this.state = {
  headers: (() => {
    return [...this.props.headers, {id: "Modify" , numeric: false, disablePadding: false, label: "Modify"}]
  })()
}

Answer 4

创建您必须添加的组件。

let newObject = { "id": "Modify" , "numeric": false, "disablePadding": false, "label": "Modify" }

现在，与创建的newObject一起创建一个副本。

const headers = [...this.props.headers, newObject]

现在，将标题设置为状态变量标题。

this.setState({
 header: headers
})

我希望这对您有用。

Reactjs-如何复制道具？

4 个答案: