В настоящее время я пытаюсь показать данные, обслуживаемые API и полученные с помощью выборки. Но при развертывании с помощью 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 ()?

потому что ваш второй пункт в списке - 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);
Я предпочитаю второе решение.
Обновлен ответ, вы должны проверить, что item не является null, если он не равен нулю, верните свой View
Спасибо за ответ, есть ли оптимальный метод удаления нуля или это вопрос замены при зацикливании?