React - 将数组推送到状态答案

【问题标题】：React - Push array to StateReact - 将数组推送到状态
【发布时间】：2024-01-21 14:03:01
【问题描述】：

getInitialState: function() {
     p:{'Keeper' : [] , 'Defenders': [] , 'Midfield' : [], 'Forwards' : []}}
}
onUpdatePlayers : function (newState) {
    var pos;

    if (newState.position.includes('Back')) {
        pos = 'Defenders'
    } else if (newState.position.includes('Midfield')){
        pos = 'Midfield'
    } else if (newState.position.includes('Forward')) {
        pos = 'Forwards'
    } else {
        pos = newState.position;
    }

    this.state.p[pos].push(newState)
}

基本上，我想将一些数组推送到多个状态的属性中。不知何故，我需要将此代码“this.state.p[pos].push(newState)”更改为使用 this.setState。我已经谷歌它并找到了类似的东西

    this.setState({
        p : this.state.p[pos].concat([newState])
    });

显然，它根本没有帮助。你能告诉我这个吗？非常感谢，

干杯！！

【问题讨论】：

标签： arrays reactjs state

【解决方案1】：

如果您确实需要将您的状态深度嵌套，您需要将整个 p 属性替换为新对象。例如使用Object.assign

this.setState({
  p: Object.assign(this.state.p, {
    [pos]: this.state.p[pos].concat(newState)
  })
})

【讨论】：

谢谢 Yury，它确实适用于你的方法。！！但是，我觉得这可能不是使用 getInitialState 方法定义多状态数组的最佳方法。假设我没有任何 InitialState。返回相同结果的更干净和更好的方法吗？但不使用深度嵌套或使用 Object.assign ？
“它确实适用于你的方法。”你能更精确一点吗？如果 newState 是数组，则此代码应将其与您在状态中的代码连接起来。 Object.assign 工作 1 级深。您需要编写一些代码或使用库（例如 lodash）进行深度克隆。

【解决方案2】：

Danny Kim，您在要添加的新密钥上缺少引号。将最后一行更改为

this.state.p['pos'].push(newState)

【讨论】：

pos 是变量范围。不是字符串。还是谢谢