FlatList не работает при итерации json - PullRequest
Новая
       8

FlatList не работает при итерации json

0 голосов
/ 26 октября 2018

В настоящее время я пытаюсь показать данные, обслуживаемые API и доставленные с помощью fetch. Но при развертывании с FlatList у меня появляется ошибка «undefined не является объектом (оценивающим item.title)». Я использовал JSON.stringify () и json.parse, я также перестал использовать оба и ничего, в любом случае это работает. Пожалуйста помоги. Текущий код такой: 

const { height, width } = Dimensions.get('window');
var autorization = 'Basic asdfasdfasdf';
let url = 'https://www.pagetest/api/search';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            words: 'anyword',
            Loader: [],
            loadFlatList: false
        }
    }
    handlePress = async () => {
        fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json; charset=utf-8',
                'Authorization': autorization
            },
            body: JSON.stringify({
                keyword: this.state.words,
            })
        })
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    Loader: responseJson.movies,
                })
            })
            .catch((error) => {
                alert(error);
            })
            .done();
}
/**  Function that collects the text of onChangeText and makes changes in the states, 
also calls the function that contains the 'fetch' **/

handleSearch = (text) => {
    this.setState({ words: text, isLoading: false, loadFlatList: true });
/** Function that initiates the 'fet... */

    this.handlePress();
}

render() {
    return (

         /** Head icons a input search **/

        <View style={{ backgroundColor: '#181818', height: height }}>
            <View style={styles.containerHead}>
                <Image
                    source={BACK_ICON}
                    style={{ width: 40, height: 40, paddingRight: 3,               
                     paddingTop: 5 }} />

                <View style={styles.containerFrom}>
                    <Image
                        source={SEARCH_ICON}
                        style={{ width: height * .02, height: height 
                        * .02, opacity: .2 }} />
                    <TextInput style={styles.txtInput} placeholder= 
                         {'Searching'}
                        onChangeText={(text) => 
                        this.handleSearch(text)}
                    ></TextInput>
                </View>
            </View>

            {this.state.isLoading &&
                <View style={styles.bodyText}>
                    <Text style={styles.titleText}>
                        Find movies, series, directors, actors and...
                    </Text>
                </View>}

                /** Here the FlatList starts...  */

            <View style={styles.bodyText}>
                <ScrollView>
                    {this.state.Loader.length > 0 && <FlatList
                        data={this.state.Loader}
                        keyExtractor={(item) => item}
                        extraData={this.state}
                        renderItem={({ item }) => <View style={styles.bodyText}>
                            <Text style={styles.titleText}>{item.title}, {item.description}</Text>
                        </View>}
                    />}
                </ScrollView>
            </View>
        </View>
    );
}
}

const styles = StyleSheet.create({

titleText: {
    fontSize: 25,
    color: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center',

},
containerHead: {
    flexDirection: 'row',
    backgroundColor: '#000000',
    justifyContent: 'space-between',
    height: height * .05
},
containerFrom: {
    flexDirection: 'row',
    backgroundColor: '#000000',
    justifyContent: 'flex-end'
},
bodyText: {

    justifyContent: 'center'
},
});

Я убедился, что когда FlatList начинает свою работу, извлекаемые данные доступны в состоянии, для этого я использую '{this.state.Loader> 0 && ...}', но это не сработало и не имеет работал с картой. JSON, который я получаю от API, выглядит так: 

{
    "keyword": " santo",
    "movies": [
        {
            "id": "116",
            "title": "El Milagro De Todos Los Santos",
            "description": "Cuando un grupo de refugiados birmanos se une a la congregación, el pastor de una iglesia anglicana que fracasa intenta ayudarlos plantando cosechas y buscando la ayuda de la comunidad.",
            "url": "https://www.pagetest.com/assets/video/705ae4c7b5e92a52cb9763ecb50b06d1.mp4",
            "url_en": "",
            "clasification": {
                "title": "A",
                "description": "Mayores de 6 años."
            },
            "year": "2017",
            "poster": "https://www.pagetest.com/assets/global/movie_poster/116.jpg",
            "thumbnail": "https://www.pagetest.com/assets/global/movie_thumb/116.jpg"
        },
        null
    ],
    "series": []
}

Есть идеи, почему здесь не работают ни FlatList, ни map ()?

1 Ответ

0 голосов
/ 26 октября 2018

потому что ваш второй пункт в списке - null.Ваш массив фильмов имеет 2 элемента, второй - null.Удалите null из вашего массива и он должен работать. 

renderItem={({ item }) => {
  if(item !== null) {
   return  <View style={styles.bodyText}>
              <Text style={styles.titleText}>{item.title}, 
              {item.description}</Text>
           </View>
      }
 }

или лучше просто очистите ваш массив перед его использованием 

let filteredArray = arr.map((item) => {
    if(item !== null) {
         return item;
    } else {
         return false;
    }
}).filter(Boolean);

Я предпочитаю второе решение.

...