constructor(props) {
super(props);
this.state = {
isLoading: true,
search:'',
};
}
componentDidMount(){
var url = 'url=';
axios.get(url)
.then(response =>this.onResponse(response.data));
}
onResponse(rdata){
this.setState({
isLoading:false,
veri:rdata.data
});
}
searchData(search) {
this.setState({search});
var url = 'url='+search;
axios.get(url).then(response => this.onResponse(response.data));
}
control(){
if(this.state.search.length>3)
{
this.state.veri.map((userData) => {
<Text>{userData.title}</Text>
});
}
}
render()
{
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return(
<View style={styles.container}>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText = {(search) => this.searchData(search)}
placeholder="Welcome">
</TextInput>
{this.control()}
</View>
);
}
我的数据是{[{} {} {} {} {} {} {} ...]}。打印到console.log但在渲染中,我无法打印文本。如何在渲染文本中打印?在textinput打印到{this.control()}下它没有用,打印到文本之间但它没有用,请帮帮我:(
答案 0 :(得分:0)
好的,所以缺少两个return
:
control(){
if(this.state.search.length>3)
{
return this.state.veri.map((userData) => {
return <Text>{userData.title}</Text>
});
}
return null;
}
确实,当您忘记return
时,this.control()
会返回undefined
。还要考虑:
在渲染数组时使用key
道具<Text />
。
只使用一次返回,因为删除{}
时可以删除第二次返回
下面是更优雅的解决方案:
control() {
if(this.state.search.length <= 3) return null; // mitigate the number of return by reverse the condition and return directly.
return this.state.veri.map((({title})) => <Text key={title}>{title}</Text>);
}