React Hook List - React Native - PullRequest
Новая
       7

React Hook List - React Native

0 голосов
/ 07 февраля 2020

Я новичок в React Native и пытаюсь создать небольшой алгоритм с хуками. Я пытаюсь сделать последнее: 

 //Button press 1) Hello       [Hello]
  //Button press 2) My          [Hello,My]
  //Button press 3) Name        [Hello,My,Name]
  //Button press 4) Is          [Hello,My,Name,Is]
  //Button press 5) George      [Hello,My,Name,Is,George]
  //Button press 6) And         [Hey,Hello,My,Name,Is]
  // The list has to be max size = 5

Однако у меня возникли проблемы при увеличении списка в закрытом списке размеров.

Первая проблема: размер списка не увеличивается (list.length остается на 1, даже если список [HelloMyName], это должно быть 3) Вторая проблема, как я могу продолжить добавление элементов в список, не возвращая список обратно в setState ([]), но сохраняя 5 значений, удаляя последнее значение и добавляя последнее нажатое значение в первую позицию списка

Вот мой код: 

 const [sentence, setSentence] = useState([])
      const list = [sentence]
      console.log(list.length)
      if(sentence==='HelloMyNameIsGeorge'&&list.length>=5){ 
        console.log('you are right',sentence,list.length)
      }else{
        console.log('try again',sentence)

      }



 <TouchableOpacity style={styles.textA}
onPress={() => setSentence(sentence+word )}
>

1 Ответ

0 голосов
/ 07 февраля 2020

При выполнении 

 const list = [sentence]

Вы фактически добавляете весь массив к самому внешнему массиву. Вроде как 

 const list = [[actual contents]]

Так что список на самом деле имеет длину 1, так как он имеет один элемент, элемент массива.

Может быть, то, что вы хотите, это 

const list = [...sentence]

Или просто прямо используйте массив предложений

Для второй задачи вам нужно заменить 

onPress={() => setSentence(sentence+word )}

на 

onPress={handlePress}

и определить: 

const handlePress = () => {
  if (sentence.length === 5) {
    sentence.pop() // remove last item
    sentence.push('whatever value you wanted')
    setSentence(sentence)
  } else {
    setSentence(sentence + word)
  }
}

На самом деле вы не можете изменить массив без использования SetState и ожидать, что состояние будет правильно распространять изменения, вы должны изменить массив и затем установить новое состояние (на самом деле я всегда предпочитаю делать копию и изменять копию)

...