React 네이티브 검색 기능이 렌더링되지 않습니다.

Question

렌더링되지 않는 두 가지 기능, 즉 renderTeachers()과 renderSubjects()이 있습니다. 상태 객체의 교사 배열 길이에 따라 렌더링됩니다. 나는 기록 된 state.teachers를 콘솔에 넣었고 예상대로 결과가 나왔다. 배열 길이는 하나 이상이지만 함수는 여전히 렌더링되지 않는다. 나는 왜이 기능들이 렌더링되지 않는지 이해하지 못한다.

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

Answer 1

내가 게시 한 코드에는 교사/과목이 렌더링되지 않는 이유가 표시되지 않습니다. 내 질문은, 어떻게 교사/과목 배열을 설정합니까? 상태/소품을 변경하지 않고도 반응 구성 요소를 렌더링해서는 안됩니다. 배열 코드를 공유 할 수 있습니까?