如何添加新的键值来响应 js 状态数组？答案

【问题标题】：How to add a new key value to react js state array?如何添加新的键值来响应 js 状态数组？
【发布时间】：2017-05-27 08:24:04
【问题描述】：

我想将新的键值添加到数组中？我在下面告诉你我想做什么。我怎样才能做到这一点？ 1. 构造方法中的启动状态

`this.state = {
    files: []
}'

在我使用活动文件设置状态后

this.setState({files: activeFiles})
筛选我的状态

{ files: [ { key1: val1, key2: val2, key3: val3 }, { key1: val1, key2: val2, key3: val3 }, { key1: val1, key2: val2, key3: val3 } ] }
如何为每个文件添加新的键值？我想要的状态

{ files: [ { key1: val1, key2: val2, key3: val3, key4: val4 }, { key1: val1, key2: val2, key3: val3, key4: val4 }, { key1: val1, key2: val2, key3: val3, key4: val4 } ] }

【问题讨论】：

标签： reactjs state setstate

【解决方案1】：

我认为这将满足上述情况。

const newFile = this.state.files.map((file) => {

    return {...file, key4: val4};
});
this.setState({files: newFile });

【讨论】：

这不会改变状态吗？ @duwalanise
实际上确实如此。我太傻了，我会更新这个，谢谢@FabricioG

【解决方案2】：

您可以使用forEach 并添加新值

var newState = [...this.state.files];
newState.forEach(function(file) {
  file.key4 = "val4"
})
this.setState({files: newState}, function() {
  console.log(this.state.files);
})

小提琴

class App extends React.Component {
  constructor() {
    super();
    this.state = {
        files: 
        [
            {
                key1: "val1",
                key2: "val2",
                key3: "val3"
            },
            {
                key1: "val1",
                key2: "val2",
                key3: "val3"
            },
            {
                key1: "val1",
                key2: "val2",
                key3: "val3"
            }
        ]
    }
  }
  componentDidMount() {
    console.log(this.state.files) ;
    
    var newState = [...this.state.files];
    newState.forEach(function(file) {
      file.key4 = "val4"
    })
    this.setState({files: newState}, function() {
      console.log(this.state.files);
    })
  }
  render() {
    return <div>Hello</div>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

【讨论】：