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

我的数据是{[{} {} {} {} {} {} {} ...]}。打印到console.log但在渲染中，我无法打印文本。如何在渲染文本中打印？在textinput打印到{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>);

    }

我无法打印响应数据

1 个答案: