setState如何在嵌套数组中做出反应

Question

If I have a state:

this.state = {
    data: [
      {
         match: false,
         value: "Some"
      }
    ],
};

In handler function I can add new value like that? It's correct?

  inputKeydown = (e) => {
    const val = e.target.value;
    if (e.key === 'Enter' && val) {
      this.setState({ data: [...this.state.data, {match: false, value:val}]});
    } 
  }

With this way I will get my state like that?

this.state = {
   data: [
     {
        match: false,
        value: "Some"
     },
     {
        match: false,
        value: "input value"
     },
   ],
};

Answer 1

Another way of adding values to existing state array is,

this.setState(prevState => ({
    ...prevState,
    data: prevState.data.concat({match: false, value:val})
  }),()=>console.log(this.state.data)
)

Answer 2

You can also use push method...

{
  let dataArray = this.state.data;
  dataArray.push({match: false,value: e.target.value});
  this.setState ({
    data:data array
  });
}