Почему при использовании setState элементы в массиве дублируются?

Question

[The_good_game]

Добрый день, не могу понять, почему при добавлении новых элементов в массив taskArray, после нажатия кнопки, они дублируются?
Когда пользователь вводит "Hello", ожидаемое изменение массива taskArray ["Hello"], вместо этого выводится ["Hello", "Hello"]. Возможно, дело в том, что taskArray и newArray являются по сути одним и тем же массивом, но всё же не понятно, откуда берётся копия добавляемого в массив элемента.

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {taskArray: []}
  }

  clickHandler() {
    const inputVal = document.querySelector('input').value;
    
    this.setState((prevState, prevProp) => {
      let newArray = prevState.taskArray;
      newArray.push(inputVal);
      return {taskArray: newArray}
    })
  }

  render() {
    return (
      <div className="App">
        <input placeholder="Enter a task"></input>
        <button 
          onClick={() => {
            this.clickHandler();
            console.log(this.state.taskArray)
          }}>
          Add task
       </button>
      </div>
    )
  }
}

Answer 1

[beem7]

Ну clickHandler сколько раз вызывается - 2 или 1?
Если 1, то проблема с вашим setState. А он у вас экзотический какой-то... Не знаю, зачем это надо.
Я бы сделал так

this.setState({ taskArray: [...this.state.taskArray, inputVal] });

Заодно в этом случае "taskArray и newArray НЕ являются по сути одним и тем же массивом" . spread создает новый массив.

И эту хрень уберите потом куда-нибудь подальше из React:
document.querySelector('input').value
А то в React за такое бьют. Даже если бы селектор был нормальный, а не по тэгу.