useState не работает, когда я использую его с другой функцией в onClick

Question

Я создал это состояние:

const [list, insert] = React.useState(["a","b"]);

И у меня есть кнопка, которая, когда я нажимаю ее, я хочу установить list как ["a","b","c"]

Это работает:

<button onClick={() => insert(list.concat(["c"]))}>Insert</button>

Но это не так:

<button onClick={() => {list.push("c");insert(list)}}>Insert</button>

И я не знаю, почему

Answer 1

НИКОГДА не изменяйте this.state напрямую, поскольку последующий вызов setState () может заменить сделанную вами мутацию. Обрабатывайте this.state, как если бы оно было неизменным.

используйте операцию распространения:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

в вашем случае:

insert([...list,'c'])