js状態の配列に反応するために新しいキー値を追加する方法は？

Question

配列の状態に新しいキー値を追加しますか？私は以下で何をしたいか教えてください。どうやってやるの？ consruture方法で 1.状態

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

Iがアクティブファイル

this.setState（{ファイル：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 } ] }

Answer 1

私はこれが上記のシナリオを満たしていると思います。

const newFile = this.state.files.map((file) => { 
    file.key4 = val4; 
    return file; 
}); 
this.setState({files: newFile }); 

Answer 2

たい状態。

for(let file of this.state.files){ //loop over an array of files in state 
    file['key4'] = val4; 
} 

this.setState('files' : files); //update state 

Answer 3

あなたは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>

のように新しい値を追加することができます