迭代JSON时，FlatList不起作用

Question

目前我正在尝试显示API提供的数据，并随fetch一起带来。但是当使用FlatList部署时，我有一个错误：

"undefined不是对象(评估项.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 && ...}，但它没有工作，也没有与map一起工作。我从API得到的JSON是这样的：

{
"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()都不在这里工作吗？

Answer 1

是因为列表中的第二个项是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);

我更喜欢第二种解决方案。