Блог

Главная - Вопросы по программированию - Это правильный способ установить состояние с помощью перехвата useState от react

Это правильный способ установить состояние с помощью перехвата useState от react

#reactjs #react-hooks #use-state

#reactjs #реагирующие перехваты #use-state

Вопрос:

Я изучал перехваты React и не был уверен, как useState работает с массивами. Итак, я создал рабочий пример с 3 управляемыми входами, подаваемыми массивом. Это работает, но мне было интересно, является ли это правильным / оптимальным способом сделать это.

Рабочий пример в codepen

 const { useState } = React;

const InputAndButton = ({ tag, index, handleTagChange }) => (
  <div>
    <input value={tag} onChange={(e) => handleTagChange(e.target.value, index)} />
    <button type="button" onClick={() => handleTagChange('', index)}>amp;times;</button>
  </div>
)

function Tags(){
  const [ tags, setTags ] = useState(["", "", ""]);
  const handleTagChange = (value, index) => {
    // make copy of state
    const tagsCopy = [...tags];
    // change the [i] value to the new one given
    tagsCopy[index] = value;
    // set copy back as state
    setTags(tagsCopy);
  }
  return(
    <form>
      tags
      {tags.map((tag, i) => <InputAndButton tag={tag} index={i} handleTagChange={handleTagChange} key={i} />)}
    </form>
  )
}

ReactDOM.render(<Tags />, document.getElementById("app"));

Кто-нибудь может дать мне здесь отзыв?

Комментарии:

1. Для меня это выглядит нормально, хотя я лично предпочел бы использовать .map вместо этого (полностью избегает мутации)

2. любая причина, по которой вы делаете «useState([«»,»»,»»]) ? это не то, как вы это делаете. Вы просто используете «useState ([])»

3. Я инициализирую состояние как массив с 3 пустыми полями, потому что я использую их для отображения входных данных. Вместо этого можно было бы установить состояние в [], но для этого потребовалось бы больше кода для отображения 3 полей и проверки каждого поля на наличие соответствующего значения в state.