React本机搜索功能不呈现

问题描述:

我有两个函数不是呈现:renderTeachers()renderSubjects()。它们根据状态对象中教师数组的长度进行渲染。我控制台记录state.teachers和结果如预期,数组长度不止一个,但功能仍然不呈现。我不明白为什么这些功能没有渲染。React本机搜索功能不呈现

class Search extends Component { 
    state = { 
    teachers: [], 
    subjects: [], 
    rating: 3.5, 
    }; 

    requestData = (queryObj) => { 
    console.log(queryObj); 
    const client = algoliasearch('__ID__', '__KEY__'); 
    const queries = [{ 
     indexName: 'teachers', 
     query: queryObj, 
     filters: 'Rating >= 3.5', 
    }, { 
     indexName: 'subjects', 
     query: queryObj, 
    }]; 
    if (queryObj === '') { 
     this.setState({ showSearchVal: false }); 
    } else { 
     client.search(queries, this.searchCallback.bind(this)); 
    } 
    } 

    searchCallback = (err, content) => { 
    if (err) { 
     console.error(err); 
     return; 
    } 
    this.setState({ teachers: content.results[0].hits, subjects: content.results[1].hits }); 
    } 

    renderSubjects =() => { 
    if (this.state.subjects.length >= 1) { 
     return this.state.subjects.map(subject => <SubjectDetail key={subject.objectID} subject={subject} />); 
    } 
    return null; 
    } 

    renderTeachers =() => { 
    console.log('in'); 
    if (this.state.teachers.length >= 1) { 
     return this.state.teachers.map(teacher => <SearchDetail key={teacher.UID} person={teacher} />); 
    } 
    return null; 
    } 

    render() { 
    return (
     <View> 
     <Header search onPress={() => this.searchBar.show()} /> 
     <SearchBar 
      backgroundColor='#02254e' 
      iconColor='#4f5d6d' 
      placeholderTextColor='#4f5d6d' 
      backButton={<Icon name='keyboard-backspace' size={24} color='#4f5d6d' style={{ alignSelf: 'center' }} />} 
      textColor='white' 
      animate={false} 
      handleChangeText={this.requestData} 
      selectionColor='#01152d' 
      fontFamily='avenir_heavy' 
      backCloseSize={24} 
      ref={(ref) => { this.searchBar = ref; }} 
     /> 
     <View style={{ width, height, alignItems: 'center', flex: 1 }}> 
      <ScrollView style={{ flex: 1 }}> 
      <Text style={styles.topResultTextStyle}> 
       {this.state.subjects.length >= 1 ? 'Subjects' : ''} 
      </Text> 
      {this.renderSubjects()} 
      <Text style={styles.topResultTextStyle}> 
       {this.state.teachers.length >= 1 ? 'Teachers' : ''} 
      </Text> 
      {this.renderTeachers()} 
      </ScrollView> 
     </View> 
     </View> 
    ); 
    } 
} 

export { Search }; 

从您发布的代码中,我看不到教师/科目为什么不渲染的原因。我的问题是,你如何设置教师/科目阵列?不改变状态/道具,反应组件不应渲染。你可以请分享数组集代码?

+0

数组设置代码是在searchCallback –

+0

你可以附上一个例子:content.results [0] .hits/content.results [1] .hits? – Yossi