Как конкатенировать последний элемент в состоянии массива?

Question

скажем, у меня есть такой массив: ['uk', 'germany', 'spain']

, а затем я хочу конкатенировать его конец, но для каждого нажатия клавиши как мне это сделать?

, чтобы он мог напоминать следующее:

['uk', 'germany', 'spain', 'f']

['uk', 'germany', 'spain', 'fr']

['uk', 'germany', 'spain', 'fra']

['uk', 'germany', 'spain', 'fran']

et c

Я собирался просто получить значение, а затем удалить последнее значение в массиве и добавить новое, например,

['uk', 'germany', 'spain', 'fr'] // Я бы удалил fr, а затем добавил next val, fra например,

проблема возникает впервые

['uk', 'germany', 'spain'] если бы я сделал это здесь, я бы удалил Испанию

, прежде чем вы спросите, почему я делаю это вот так. Я прошу пользователей добавлять в список случайные вещи, которые они хотят, но они могут реально сохранить в любой момент, поэтому ['uk', 'germany', 'spain', 'fr'] будет совершенно допустимым в моем случае использования

любые идеи, как я могу этого добиться?

Answer 1

У вас не может быть пользователей, набирающих

 "ukgermanyspainfra"

, если вы хотите добавить их как

["uk","germany"... ]

У вас должен быть механизм для разделения разных элементов, который может быть кнопкой или вы можете спросить пользователи должны использовать «,» для разделения элементов, если они вводят все страны в один входной элемент. Затем вы можете применить предложенное вами решение для удаления «fr» в конце массива и добавления «fra» в конец массива.

Answer 2

Вот демонстрация требования с использованием useState хука на входе; что написано в неизменной доброжелательной манере; этот номер 3 жестко запрограммирован, но также может быть динамическим c.

ReactDOM.render(<App/>, root);

function App(){
  const [countries, setCountries] = React.useState(['uk', 'germany', 'spain']);
  
  function changeHandler(e){
    if(countries[3]){
      let countriesCopy = countries.slice(0);
      countriesCopy[3] = e.target.value;
      setCountries(countriesCopy)
    }else{
      setCountries(countries.concat(e.target.value))
    }
  }

  return(
    <input onChange={changeHandler} value={countries[3]} />
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>