Динамическое отображение результатов запроса к БД в React Native - PullRequest
Новая
       10

Динамическое отображение результатов запроса к БД в React Native

1 голос
/ 22 апреля 2020

Вот мой код 

const FindFun = () =>{

      const [place, setPlace] = useState('');
      var arr = [];

      function _handlePress(){
            firebase.firestore().collection('something').where("text", "==" , 
                                                                place.place).get().then((querySnapshot) =>{
                     querySnapshot.forEach((doc) =>{
                         arr.push(doc.data());                
                      })
                    })        
                  }

    return(
        <View>         
                <Text>Insert the place</Text>
                <TextInput style={styles.place}
                    editable
                    maxLength = {100}
                    placeholder = "E.g. New York"
                    onChangeText={(text) => setPlace({place:text})}
                />
                <Button
                    title = 'Search'
                    onPress={() => _handlePress()}
                />   

              {arr.map((item, key)=>(
                <Text key={key}> { item.user } </Text>)
               )}

        </View>
    )
  }

Отказ от ответственности

Я довольно новичок в React и React Native, поэтому я не совсем уверен, насколько я делать правильно.

Проблема

В настоящее время в моем последнем компоненте <Text> Я не получаю никаких данных для отображения.

Факты

Кажется, arr правильно заполнен результатами БД, которые я запросил.

Результат

Я хотел бы иметь динамическую c совокупность <Text> компонентов с соответствующими данными, как только запрос будет завершен. Идея заключается в том, что пользователь нажимает кнопку, программа собирает данные из БД, а затем эти данные отображаются на экране.

Любая рекомендация будет принята с благодарностью.

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Измените var arr = [] на const [arr, setArr] = useState([]);

const handlePress = (values)=>{
            var list = [];

            firebase.firestore().collection('something').where("text", "==" , 
                                                           place.place).get().then((querySnapshot) =>{
                querySnapshot.forEach((doc) =>{ 
                        list.push(doc.data());    

                    })  
                    setArr(list);   

                })  
}

В основном это будет pu sh всех результатов для переменной, а затем вы установите свой arr равным var list.

Проверьте это.

1 голос
/ 22 апреля 2020

для динамического изменения данных, отображаемых в вашем компоненте, вам нужно добавить свой массив в состояние, иначе ваш компонент не будет повторно визуализироваться, даже если массив правильно обновлен из вашего хранилища Firebase. это то же самое, что и ваша переменная "place". вам нужно сделать следующее: 

const [arr,setArr] = useState([])
//.... then use setArr([...arr,newvalue])

или создать внутри него новый элемент arr и pu sh, потому что для повторного рендеринга необходимо изменить массив, а не только элементы внутри массив

...