Обновление массива с помощью React-хуков

Question

Я в корне неправильно понимаю React-хуки, особенно функцию useState. Почему код ниже не обновляет индекс старого массива, а вместо этого устанавливает значение трюка в 1? Я понимаю, как поместить sh новый элемент в массив с перехватчиками React, но как обновить существующие значения?

const [trick, modifyTrick] = useState([null, null, null, null]);

const identityTrick = () => {
    modifyTrick(oldTrick => oldTrick) //works
}

const updatedTrick = () => {
    modifyTrick(oldTrick => oldTrick[0] = 1) //sets the entire value of trick to 1
}

Answer 1

Вы также можете сделать это так:

const updateTrick = () => {
    modifyTrick(oldTrick => {
      oldTrick[0] = 1;
      return oldTrick;
    });
};

Answer 2

Если вы предоставите modifyTrick функцию, возвращаемое значение будет новым значением trick. Возвращаемое значение вашей функции равно 1, поэтому trick установлено в 1.

oldTrick[0] = 1 //this expression returns 1.

Измените массив oldTrick в вашей функции modifyTrick, а затем верните его:

const updatedTrick = () => {
    modifyTrick(oldTrick => {
       oldTrick[0] = 1

       return oldTrick;
    });
};

Answer 3

Попробуйте это

  const updatedTrick = () => {
    modifyTrick(oldTrick => {
      let newTrick = [...oldTrick];
      newTrick[0] = 1;
      return newTrick;
    })
  }