我无法打印响应数据

Question

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>
    );
  }

我的数据是 {[{}{}{}

{}...]}。 打印到控制台.log但是在渲染中，我无法以文本打印。如何在渲染中的文本中打印它？在文本输入下打印到 {this.control((} 它不起作用，打印到文本之间，但它不起作用，请帮助我:(

Answer 1

好的，所以缺少两个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>);
    }