Блог

Главная - Вопросы по программированию - Сопоставить массив в функциональном компоненте из API

Сопоставить массив в функциональном компоненте из API

#arrays #react-native #react-native-android #fetch-api #picker

#массивы #react-native #выборка-api #средство выбора

Вопрос:

Я хочу вызвать и отобразить API в сборщике react native. Я не понимаю, как это сделать в функциональном компоненте, в разделе map, чтобы он получал значение

 import React, {useState,useEffect} from 'react';
import {View, StyleSheet, Picker} from 'react-native';

const App = () => {

    const [selectedValue, setSelectedValue] = useState([]);

    useEffect(() => {
        fetch('https://aboutreact.herokuapp.com/demosearchables.php')
        .then(response => response.json())
        .then(responseJson => {
            console.log(responseJson.results)
            setSelectedValue(responseJson.results)
        })
        .catch((error) => {
            console.error(error);
          });
      }, []);

    return (        
        <View style={{flex: 1,backgroundColor:'white'}}>
                <Picker
                    selectedValue={selectedValue.id}
                    style={{ width: '100%' }}
                    onValueChange={(itemValue) => setSelectedValue({ id: itemValue })}>
                    { ???.map((selectedValue, i) => {
                        return <Picker.Item key={i} value={selectedValue.id} label={selectedValue.name} />
                    })}
                </Picker>
               </View> 
        
    )
}

export default App

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

1. selectedValue является ли массив или объект и? Я спрашиваю, потому const [selectedValue, setSelectedValue] = useState([]); что утверждает, что это массив, тогда это: (itemValue) => setSelectedValue({ id: itemValue }) утверждает, что это объект с ключом идентификатора…

2. спасибо за ваше внимание, и ваш вопрос, насколько мне известно, помогает..

Ответ №1:

  1. Используйте массив для хранения ваших начальных значений для Picker .
  2. Затем установите для этого массива значение setState, когда API будет разрешен.
  3. Используйте другое состояние для сохранения выбранного значения.
 import React, {useState,useEffect} from 'react';
import {View, StyleSheet, Picker} from 'react-native';

const App = () => {
    const [values, setValues] = React.useState([]);
    const [selectedValue, setSelectedValue] = useState(null);

    useEffect(() => {
        fetch('https://aboutreact.herokuapp.com/demosearchables.php')
        .then(response => response.json())
        .then(responseJson => {
            setValues(responseJson.results)
        })
        .catch((error) => {
            console.error(error);
          });
      }, []);

    return (        
        <View style={{flex: 1,backgroundColor:'white'}}>
                <Picker
                    selectedValue={selectedValue ? selectedValue.id : null}
                    style={{ width: '100%' }}
                    onValueChange={(itemValue) => setSelectedValue({ id: itemValue })}>
                    { values.map((value, i) => {
                        return <Picker.Item key={i} value={value.id} label={value.name} />
                    })}
                </Picker>
               </View> 
        
    )
}