0

レンダリングされていない2つの関数: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

あなたが投稿したコードから、教師/科目がレンダリングされない理由はわかりません。私の質問は、どのように教師/科目の配列を設定するのですか?状態/小道具を変更することなく、反応コンポーネントはレンダリングされません。あなたは配列のコードを共有していただけますか?

+0

配列セットコードはsearchCallbackにあります –

+0

あなたは:content.results [0] .hits/content.results [1] .hitsの例を添付してください。 – Yossi

関連する問題